CSS: как установить размер изображения относительно высоты родительского элемента?

Я пытаюсь выяснить, как изменить размер изображения, чтобы оно сохраняло соотношение ширины к высоте, но меняло размер до тех пор, пока высота изображения не совпадет с высотой содержащего div. У меня есть довольно большие и длинные изображения (скриншоты), и я хочу поместить их в div шириной 200 пикселей и высотой 180 пикселей для отображения и без изменения размера изображений вручную. Чтобы это выглядело хорошо, стороны изображения должны быть переполнены и скрыты с помощью содержащего div. Вот что у меня есть на данный момент:

http://jsfiddle.net/f9krj/2/

HTML

<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
    <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>

CSS

a.image_container {
    background-color: #999;
    width: 200px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
}
a.image_container img {
    width: 100%;
}

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

Оригинальный ответ:

Если вы готовы выбрать CSS3, вы можете использовать свойство css3 translate. Измените размер в зависимости от того, что больше. Если ваша высота больше, а ширина меньше контейнера, ширина будет увеличена до 100%, а высота будет обрезана с обеих сторон. То же самое и с большей шириной.

Ваша потребность, HTML:

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

И CSS:

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

div > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

Вуаля! Работает: http://jsfiddle.net/shekhardesigner/aYrhG/

Объяснение

DIV установлен в relativeпозицию. Это означает, что все дочерние элементы получат начальные координаты (исходные точки), откуда начинается этот DIV.

Изображение устанавливается как элемент BLOCK, min-width/heightоба значения установлены на 100%, что означает изменение размера изображения, независимо от его размера, как минимум 100% от его родительского элемента. minэто ключ. Если по min-height высота изображения превысила высоту родителя, проблем нет. Он будет искать if min-width и пытаться установить минимальную высоту, равную 100% от родителей. Оба варианта идут наоборот. Это гарантирует, что вокруг div нет пробелов, но изображение всегда немного больше и обрезаетсяoverflow:hidden;

Теперь imageон установлен в absoluteположение с помощью left:50%и top:50%. Значит, сдвиньте изображение на 50% сверху и слева, убедившись, что исходная точка взята из DIV. Левая / верхняя единицы отсчитываются от родительской.

Волшебный момент:

transform: translate(-50%, -50%);

Теперь эта translateфункция transformсвойства CSS3 перемещает / перемещает рассматриваемый элемент. Это свойство имеет дело с применяемым элементом, поэтому значения (x, y) OR (-50%, -50%) означают перемещение негативного изображения влево на 50% от размера изображения и перемещение к верхнему негативу на 50% размера изображения. .

Например. если размер изображения был transform:translate(-50%, -50%)200 пикселей × 150 пикселей , будет рассчитан перевод (-100 пикселей, -75 пикселей). Единица% помогает, когда у нас есть изображения разного размера.

Это просто хитрый способ определить центроид изображения и родительского DIV и сопоставить их.

Приносим извинения за то, что слишком долго объясняли!

Ресурсы, чтобы узнать больше:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
• https://css-tricks.com/centering-css-complete-guide/

Измените свой код:

a.image_container img {
    width: 100%;
}

К этому:

a.image_container img {
    width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
    height: 100%;
}

http://jsfiddle.net/f9krj/5/

Используйте max-widthсвойство CSS, например:

img{
  max-width:100%;
}

Если вы берете ответ Шекхара К. Шармы, и он почти работает, вам также нужно добавить к своему this height: 1px;или this, width: 1px;потому что это должно работать.

вы можете использовать для этого гибкую коробку .. это решит вашу проблему

.image-parent 
{
     height:33px; 
     display:flex; 
}

Если все, что вы пытаетесь сделать, это заполнить div, это может помочь кому-то другому, если соотношение сторон не важно, реагирует.

.img-fill > img {
  min-height: 100%;
  min-width: 100%;  
}