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

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

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

HTML

<a class="image_container" href="#" onclick="location.href='http://www.skintype.ca/assets/background-x_large.jpg'; return false;">
    <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%;
}

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

Ответы

Ответ 1

Исходный ответ:

Если вы готовы выбрать 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%);
}

Voila! Работа: http://jsfiddle.net/shekhardesigner/aYrhG/

Описание

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

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

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

Магический момент:

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

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

Eg. если размер изображения 200px & times; 150px, transform:translate(-50%, -50%) будет рассчитан для перевода (-100px, -75px). % unit помогает, когда мы имеем различный размер изображения.

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

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

Ресурсы для чтения:

Ответ 2

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

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/

Ответ 3

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

img{
  max-width:100%;
}

Ответ 4

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