Сделать полное заполнение изображения div без растяжки

Ответ 1

Автоматический выбор изображений для выбора Div - Создание работы CSS

Вот один из способов сделать это, начиная со следующего HTML:

<div class="container portrait">
    <h4>Portrait Style</h4>
    <img src="http://placekitten.com/150/300">
</div>

и CSS:

.container {
    height: 300px;
    width: 240px;
    background-color: red;
    float: left;
    overflow: hidden;
    margin: 20px;
}
.container img {
    display: block;
}

.portrait img {
    width: 100%;
}
.landscape img {
    height: 100%;
}

и демонстрационный скрипт: http://jsfiddle.net/audetwebdesign/QEpJH/

Когда у вас есть изображение, ориентированное как портрет, вам нужно масштабировать ширину до 100%. И наоборот, когда изображение ориентировано на ландшафт, вам нужно масштабировать высоту.

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

Кроме того, у вас нет простого способа центрирования изображения, поскольку верхний левый угол изображения прикреплен к верхнему левому углу содержащего блока.

Помощник jQuery

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

$(".container").each(function(){
    // Uncomment the following if you need to make this dynamic
    //var refH = $(this).height();
    //var refW = $(this).width();
    //var refRatio = refW/refH;

    // Hard coded value...
    var refRatio = 240/300;

    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < refRatio ) { 
        $(this).addClass("portrait");
    } else {
        $(this).addClass("landscape");
    }
})

Для каждого изображения в .container, получите высоту и ширину, проверьте, если width<height, а затем установите соответствующий класс.

Кроме того, я добавил проверку, чтобы учесть соотношение сторон содержащего блока. Раньше я неявно принимал квадратную панель обзора.

Ответ 2

Вывод строки: max-width: 100% в вашем файле CSS, похоже, делает трюк.

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
height: auto;
}

Также вы можете добавить > в ваш закрывающий div в вашем файле HTML, чтобы сделать код более аккуратным.

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div>

Вот рабочая ссылка JSFiddle: http://jsfiddle.net/HsE6H/19/

Ответ 3

Для тех, кто хочет сделать это, у которого нет динамических изображений, здесь используется все CSS-решение с использованием фонового изображения.

<div class="container" 
    style="background-image: url('http://placehold.it/300x1500'); 
    background-size: cover; background-position: center;">
</div>
<div class="container" 
    style="background-image: url('http://placehold.it/1500x300'); 
    background-size: cover; background-position: center;">
</div>

"background-size: cover" делает так, чтобы изображение масштабировалось для охвата всего div при сохранении пропорций. CSS также можно перенести в файл CSS. Хотя если он динамически сгенерирован, свойство background-image должно оставаться в атрибуте style.

Ответ 4

Фон может сделать это

• установить изображение в качестве фона

2.

div {
   -webkit-background-size: auto 100%;
   -moz-background-size: auto 100%;
   -o-background-size: auto 100%;
   background-size: auto 100%;
}

или

div {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Ответ 5

Вы должны попробовать следующее:

img {
    min-width:100%;
    min-height:100%;
}

Ответ 6

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

https://github.com/johnpolacek/imagefill.js/

Ответ 7

Он работает, если вы добавите следующее в родительский div для стилизации img; https://jsfiddle.net/yrrncees/10/

.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}

Ответ 8

Это может сделать работу:

.container {
    float: left;
    height: 300px;
    width: 240px;
    background-color: red;
    margin: 20px;
}

img {
    width:240px;
    height:300px;
}

Ответ 9

Мы пошли по пути с помощью приложения Angular с использованием варианта подхода jQuery выше. Затем один из наших ярких коллег придумал чистый подход CSS. См. Этот пример здесь: https://jsfiddle.net/jeffturner/yrrncees/1/.

В основном использование высоты линии решило проблему для нас. Для тех, кто не хочет ударить по скрипке, фрагменты кода:

.container {
    margin: 10px;
    width: 125px;
    height: 125px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

Ключ заключается в использовании линейной высоты и установке контейнера для выполнения того же самого.

Ответ 10

Я столкнулся с этой темой, потому что пытался решить подобную проблему. Затем в голове появилась лампочка, и я не мог поверить, что это сработало, потому что это было так просто и так очевидно.

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
min-width:100%;
min-height:100%;
}

Просто установите минимальную ширину и минимальную высоту до 100%, и она всегда будет автоматически изменяться, чтобы соответствовать div, отрезая лишнее изображение. Нет суеты.

Ответ 11

Использование изображения в качестве фона Div имеет много недостатков (например, отсутствие ALT для SEO). Вместо этого используйте object-fit: cover; в стиле тегов изображений!

Ответ 12

Вот еще одно решение, которое я нашел, что нет необходимости отделять портретов, пейзажей или скриптов.

  <div class="container">
    <img src="http://placehold.it/500x500" class="pic" />
  </div>

CSS

.container{
  position: relative;
  width: 500px;
  height: 300px;
  margin-top: 30px;
  background: #4477bb;
}
.pic{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

Вот он, он хорошо работает...

https://jsfiddle.net/efirat/17bopn2q/2/

Ответ 13

Следующее решение очень короткое и чистое, если вам нужно вставить тег img в тег div:

.container, .container img 
{
	max-height: 300px;
	max-width: 240px;
}

Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>

<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>