Как я могу центрировать <img> внутри div и иметь его масштаб с высотой div?

Question

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

Пример:

* У меня это работает. Ответы ниже, я обновляю этот код, чтобы показать все, что я должен был использовать, чтобы заставить его работать *

HTML

<div class="container"> 
    <img class="derp" src="http://gridiculo.us/images/kitty02.jpg"> 
</div> 

CSS:

.container { 
    height:250px; 
    width:50%; 
} 
.derp{ 
    object-fit: cover; 
    height: 100%; 
    width: 100%; 
} 

Вот почти пример : http://codepen.io/chriscoyier/pen/myPMGB

Разница заключалась бы в том, что я использую s, а не фоновое изображение, и что вместо img, заполняющего div полностью, это соответствовало бы высоту и скрыть переполнение ширины.

Я стараюсь избегать использования фонового изображения, так как я использую много этих фрагментов, а правила CSS для каждого не будут работать.

Answer 1

Чтобы увеличить масштаб с высоты div, я бы изменил высоту с px на % - таким образом, чем больше размер div, тем больше изображение. Для определенного изображения я использовал бы край в изображении css. Это было бы выглядеть так:

.derp{ 
 
     height:80%; 
 
     width:80%; 
 
     margin:10%; 
 
    } 
 
.container { 
 
    height:250px; 
 
    width:50%; /* needed */ 
 
    /* inner img is centered horizontally */ 
 
    vertical-align:top; 
 
    text-align:center; 
 
    overflow-x:hidden; 
 
}

<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div --> 
 
    <img class="derp" src="http://gridiculo.us/images/kitty02.jpg"> 
 
</div>

Answer 2

В зависимости от того, сколько браузеров вам нужно поддерживать, я предлагаю вам использовать объектную припадок! Поддержка этого - okay if you can ignore IE, но в случае, если ваш проект подходит, я не вижу проблем с его использованием сегодня. Кроме того, всегда есть polyfill.

Вы можете найти хорошее резюме on CSS-Tricks.com о недвижимости. Он в основном работает аналогично фону, но для <img> тегов. В вашем случае object-fit: cover; делает трюк.

Я сделал a little demo на CodePen, который показывает вам, как он работает.

img { 
    height: 100%; 
    object-fit: fill; 
    width: 100%; 
} 

Answer 3

Лучший способ сохранить пропорции изображения, чтобы установить ширину в авто (и это поведение по умолчанию, так что вам не нужно устанавливать явно). И с простым overflow:hidden он работает почти так, как вы этого хотите.

Твердая часть центрируется горизонтально. Вы можете попробовать этот ответ: css to center a image horizontally.

Однако, если все ваши изображения не того же размера, вам нужно будет сделать одно правило для каждого изображения. И в этом случае размещение изображения как background-img было бы лучше для семантики и доступности (потому что ваш образ не имеет смысла на странице, он не передает никакой информации, это украшение). <img> будет считываться с помощью программы чтения с экрана (атрибут alt), и в вашем случае это не поможет слепым людям.