Использование переполнения скрыто при выравнивании содержимого в правом нижнем углу div?

Question

У меня есть div с шириной 200 пикселей и высотой 150 пикселей. Изображение в div будет больше. Я хочу выровнять изображение внутри нижнего правого угла, используя скрытую настройку переполнения на остальной части изображения. Поэтому должен быть виден только нижний правый угол изображения.

Я не могу понять, как использовать относительное позиционирование в этом случае, потому что в div будут изображения разных размеров. Мне нужно любое изображение в div, чтобы автоматически заблокировать выравнивание по правому нижнему краю независимо от размера Это возможно?

Вот мой код:

<div align="right" valign="bottom" style="width:200px; height:105px; border: 1px dotted black; overflow: hidden;">
  <div style="position:relative; bottom:0px; right:0px;">
    <img src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" width="300" height="300" />
  </div>
</div>

Для примера у меня установлено изображение размером 500x300px, но в готовом продукте это будет тянуть разные изображения.

Answer 1

Вы можете использовать абсолютное положение для изображения и установить его правые и нижние свойства равными 0.

.container {
  width: 200px;
  height: 150px;
  position: relative;
  overflow: hidden;
}

img {
  position: absolute;
  right: 0;
  bottom: 0;
}

<div class="container">
  <img src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt="">
</div>

Answer 2

Чтобы позиционировать элемент относительно его родителя, сначала необходимо установить position: relative в родительском контейнере.

HTML-файл:

<div class="outer">
    <div class="inner">
        <img src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" width="300"
        height="300" />
    </div>
</div>

Файл CSS:

.outer {
    width: 200px;
    height: 105px;
    border: 1px dotted black;
    overflow: hidden;
    position: relative;
}

.inner {
    position: absolute; 
    bottom: 0px; 
    right: 0px;
}

Я предоставил JSFiddle , чтобы помочь вам в этом.

Надеюсь, это поможет!

Answer 3

Вы не можете сделать это, используя положение относительно изображения.

Но вы можете использовать relative и absolute вместе.

Если у родителя есть position: relative, а у ребенка position: absolute, ребенок будет использовать область родителя в качестве предела для самостоятельного позиционирования

Попробуйте это:

<div align="right" valign="bottom" style="width:200px; height:105px; border: 1px dotted black; overflow: hidden; position: relative">
    <div style="position:absolute; bottom:0px; right:0px;" >
        <img src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" width="300" height="300"/>
    </div>
</div>