Подогнать изображение внутри div без растяжения

Question

Мне нужно разместить изображение внутри 300x300 div, не растягивая изображение.Я видел это на хафф-посте, слайдере на этой странице:

http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html

Изображения обрезаются, но не растягиваются.Вместо использования max-width, max-height.

Как мне это сделать?

Answer 1

Изображения на сайте, на который вы ссылаетесь, имеют фактический размер, поэтому простой ответ - просто изменить размер изображения.

Вы не можете сделать это без "растяжения" изображения, если оно имеет ширину менее 300 пикселей или высоту, но вы можете сделать это без изменения соотношения, как я думаю, вы имеете в виду.

Вот основная идея:

<div><img></div>

Если вы хотите использовать минимальную ширину 300 пикселей (вы ожидаете, что маленькие изображения должны быть больше), попробуйте следующее:

div {
    width:300px;
    height:300px;    
    overflow:hidden;
}
div img {
    min-width:100%;
}

Демо: http://jsfiddle.net/Z47JT/

Если вы хотите обрезать изображения (потому что вы ожидаете, что они будут большими), но не увеличивать их, попробуйте следующее:

div {
    width:300px;
    height:300px;    
    overflow:hidden;
    position:relative;
}
div img {
    position:absolute;
}

Демо: http://jsfiddle.net/Z47JT/1/

Объедините обе эти техники, если хотите.

Другой способ - просто использовать background-image вместо контейнера, но изменить его размер (если вы хотите растянуть изображения меньшего размера) будет сложно, если вы не используете background-size, который не поддерживается полностью. В противном случае это очень простое решение.

Answer 2

Используйте решение Flex Box

Вот HTML,

<div><img /></div>

Добавить стили

div{
   width:100%;
    height:250px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden
}
div img{
  flex-shrink:0;
    -webkit-flex-shrink: 0;
    max-width:70%;
    max-height:90%;
}

Answer 3

простой способ сделать это ....

.div {
background-image: url(../images/your-image.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat;

}