it-swarm.com.ru

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

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

http://jsfiddle.net/HsE6H/

HTML

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

CSS

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

img {
max-width: 100%;
height: auto;
}

Пропорции должны оставаться неизменными. По сути, широкие изображения должны быть обрезаны по ширине, в то время как высокие изображения должны быть обрезаны по высоте. Так что просто увеличивайте столько, сколько нужно, чтобы заполнить контейнер.

Не уверен, почему я не могу заставить его работать, мне нужен JavaScript для этого?

Правка: чтобы быть ясно. Мне нужно, чтобы все на красной скрипке исчезло. Входящие изображения являются динамическими, поэтому я не могу использовать фоновые изображения. Я открыт для использования JavaScript. Спасибо! :)

20
Lennart

Автоматическое изменение размеров изображения для подгонки - Создание 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 Helper

Вы можете использовать следующее действие 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, а затем установите соответствующий класс.

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

40
Marc Audet

Удаление строки: 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
Jcpopp

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

<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.

3
BurningLights

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

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

2
lxm7

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

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

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;
}
2
comonitos

Вы должны попробовать это: 

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

Это работает, если вы добавляете следующее в родительский 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;
}
1
CodingSince007

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

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

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

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

CSS

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

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

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

0
outendesigns

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

0
Mehdi Saghari

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

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

.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;
}

Ключ в использовании line-height и настройке контейнера на то же самое.

0
Jeff Turner

Следующее решение очень короткое и чистое, если вам нужно вставить тег 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>

Кроме того, если вам не нужно использовать div, вы можете просто написать еще более короткий CSS:

 img
    {
        max-height: 300px;
        max-width: 240px;
    }
0
willy wonka

Вот еще одно решение, которое я нашел, что нет необходимости отделять portraid, ландшафт или скрипты. 

  <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/

0
efirat