Как вы растягиваете изображение, чтобы заполнить <div>, сохраняя при этом пропорции изображения?

201

Мне нужно, чтобы это изображение растянулось до максимально возможного размера без переполнения. <div> и не искажая изображение.

Я не могу предсказать соотношение сторон изображения, поэтому нет способа узнать, использовать ли:

<img src="url" style="width: 100%;">

или

<img src="url" style="height: 100%;">

Я не могу использовать оба (то есть style = "width: 100%; height: 100%;"), потому что это растянет изображение, чтобы соответствовать <div> .

<div>Имеет набор размер, процент экрана, который также непредсказуема.

Giffyguy
источник
2
Если вам нужно изображение, чтобы заполнить высоту или ширину до соответствующих размеров div, я могу думать только об использовании javascript. Это то, что вы хотите исследовать?
ОК
1
Связанный: stackoverflow.com/questions/787839/…
Мотти

Ответы:

189

Обновление 2016:

Современный браузер ведет себя намного лучше. Все, что вам нужно сделать, это установить ширину изображения на 100% ( демо )

.container img {
   width: 100%;
}

Поскольку вы не знаете соотношение сторон, вам придется использовать некоторые сценарии. Вот как я мог бы сделать это с помощью jQuery ( демо ):

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

скрипт

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})
Mottie
источник
Может ли пользователь увидеть изображение до изменения размера? Кто-нибудь проверял это?
RayLoveless
Решение почти правильное, вам просто нужно инвертировать высоту и ширину в CSS: если изображение «высокое», то ширина должна быть на 100% не высотой (которая будет больше и переполнена). Наоборот, для широких фотографий.
mbritto
@mbritto: Вы правы, мне пришлось изменить CSS на max-width / height, и я добавил демо
Mottie
@ Мотти: есть ли способ разместить изображение размером 930 пикселей в ширину в контейнере 960 пикселей без потери качества изображения
Vivek Dragon
15
Почему это принятый ответ? Вопрос в том, что изображения слишком малы для их контейнера. т.е. как можно увеличить изображение, чтобы заполнить его ширину или высоту контейнера, не увеличивая пропорции изображения. Кроме того, в вашей демонстрации удаление width:autoили height:autoсвойства не влияет на отображение ваших изображений. На самом деле, из всех свойств, которые вы применяете к изображению, он max-width: 100%имеет только какой-либо эффект и влияет только на ландшафтное изображение. Но самое главное, ваш ответ не помогает растянуть маленькое изображение, чтобы заполнить большую емкость.
Мэтти
78

Существует гораздо более простой способ сделать это , используя только CSSи HTML:

HTML:

<div class="fill"></div>

CSS:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

Это поместит ваше изображение в качестве фона, и растянет его, чтобы соответствовать divразмеру без искажений.

Райан
источник
это возможно с неопределенным количеством изображений?
TrtG
background-size: cover;Здесь есть настоящее волшебство, и это CSS3, но он имеет разумную поддержку браузера в самых последних версиях (см. w3schools.com/cssref/css3_pr_background-size.asp )
Джон Клоске
1
Возможно, стоит включить URL-адрес изображения в HTML, чтобы разделить стиль и содержимое, т.е.<div style="background-image: url('path/to/image.jpg');" class="fill"></div>
binaryfunt
background-size: cover не поддерживает соотношение сторон, части изображения, которые не пропорциональны элементу, обрезаются. Смотрите здесь
Alex_Zhong
@Alex_Zhong, вы неправильно понимаете соотношение сторон. Соотношение сторон означает, что изображение не растягивается ни в каком направлении (поэтому идеальный круг не станет овалом ни по ширине, ни по высоте). Обрезка может быть необходимой частью поддержания соотношения сторон (как в случае использования ОП).
Джереми Мориц
70

Не идеальное решение, но этот CSS может помочь. Масштабирование - это то, что заставляет этот код работать, и теоретически этот коэффициент должен быть бесконечным, чтобы идеально работать для небольших изображений - но 2, 4 или 8 работают нормально в большинстве случаев.

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}
Prouda
источник
1
Я хотел бы, чтобы это работало в Firefox. Почему нет zoomлюбви от Firefox !?
Мэтти
1
Firefox до сих пор не zoomреализован, но вот ссылка на ошибку для дальнейшего использования: bugzilla.mozilla.org/show_bug.cgi?id=390936
Адам Тейлор
31

Если можете, используйте фоновые изображения и установите background-size: cover. Это сделает фон покрывающим весь элемент.

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

Если вы застряли с использованием встроенных изображений, есть несколько вариантов. Во-первых, есть

Объект посадки

Это свойство действует на изображения, видео и другие объекты, похожие на background-size: cover.

CSS

img {
  object-fit: cover;
}

К сожалению, поддержка браузера не так хороша, поскольку IE до версии 11 вообще не поддерживает ее. Следующая опция использует jQuery

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

Пользовательский плагин jQuery

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

Используйте плагин, как это

jQuery('.cover-image').coverImage();

Это возьмет изображение, установит его как фоновое изображение на элементе обертки изображения и удалит img тег из документа. Наконец, вы могли бы использовать

Чистый CSS

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

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Надеюсь, это может кому-то помочь, счастливое кодирование!

Daniels
источник
Я искал чистое решение CSS, чтобы изображения заполняли данный контейнер без использования background-image & background-size, и код CSS здесь отлично работает для> = IE9 и современных браузеров. Демонстрация CodePen здесь
FLOQ Design
В Pure CSS я удалил min-и изменил на width: 100%; height: 100%;и работаю! отличное решение! +1 Спасибо!
Гильерме Насименто
1
background-size: containтакже полезно, если вы не хотите, чтобы изображение было обрезано.
Ponkadoodle
Вы можете добавить zoom:0.001в решение Pure CSS, чтобы уменьшить масштаб.
Айвор Чжоу
12

Обновление 2019.

Теперь вы можете использовать object-fitсвойство css, которое принимает следующие значения:fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Например, у вас может быть контейнер с изображением.

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
Эд Стеннетт
источник
7

Это невозможно только с помощью HTML и CSS, или, по крайней мере, дико экзотично и сложно. Если вы готовы добавить немного javascript, вот решение с использованием jQuery:

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

Это изменит размер изображения так, чтобы оно всегда помещалось внутри родительского элемента, независимо от его размера. И как это связано с $(window).resize()событием, когда пользователь изменяет размер окна, изображение будет корректироваться.

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

Тату Ульманен
источник
4
Я предполагаю, что $ img.parent (); действительно должно быть $ i.parent ();
Джимбо Джонни
5

Установите ширину и высоту внешнего containerdiv. Затем используйте стиль ниже на img:

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

Это поможет вам сохранить соотношение сторон вашего img

Чинтан Бхатт
источник
6
это не заполнит div.
Свен ван ден Бугаарт
5

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

img{
   object-fit: contain;
   max-height: 70px;
}
Бохао Л.И.
источник
4

Я сталкивался с этим вопросом в поисках проблемы симуляции. Я делаю веб-страницу с адаптивным дизайном, и ширина элементов, размещенных на странице, установлена ​​в процентах от ширины экрана. Высота задается значением vw.

Так как я добавляю посты с помощью PHP и базы данных, чистый CSS не может быть и речи. Однако я нашел решение jQuery / javascript немного сложным, поэтому я придумал аккуратное (по крайней мере, я так думаю) решение.

HTML (или PHP)

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}
<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

При использовании style = "" можно сделать так, чтобы PHP динамически обновлял мою страницу, а CSS-стиль вместе со style = "" в конечном итоге получился бы идеально покрытым изображением, масштабируемым для покрытия динамического тега div.

Кристиан Дженсен
источник
4

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

Подать заявление...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

стили к изображению.

ianbeans
источник
3

Используя этот метод, вы можете заполнить ваш div с изменяющимся соотношением изображений и div.

JQuery:

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}
user1994142
источник
3

Это помогло мне

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}
Developer_D
источник
2

если вы работаете с тегом IMG, это легко.

Я сделал это:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

но я не нашел, как заставить это работать с #pic {background: url (img / menu.png)} Enyone? Спасибо

ALEXELA
источник
внес изменения и нашел ответ на мою проблему! Нет, это поможет кому-то. background-image: url (images / menu.png); повторение фона: без повтора; положение: абсолютное; размер фона: 300 пикселей; высота: 100%; ширина: 100%; и вы можете изменить значение background-size, используя javascript или jquery (.attr ({'style': 'background-size: 150px auto; слева: 50px; top: 50px;'}))
aleXela
2

У меня была похожая проблема. Я решил это только с помощью CSS .

В основном Object-fit: coverпомогает вам решить задачу поддержания соотношения сторон при размещении изображения внутри div.

Но проблема была Object-fit: cover том, что в IE не работало, и оно занимало 100% ширины и 100% высоты, а соотношение сторон было искажено. Другими словами, эффекта увеличения изображения не было, что я видел в Chrome.

Подход, который я выбрал, состоял в том, чтобы расположить изображение внутри контейнера с абсолютным, а затем поместить его прямо в центр, используя комбинацию:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Как только он в центре, я даю изображение,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Это заставляет изображение получить эффект Object-fit: cover.


Вот демонстрация вышеуказанной логики.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Эта логика работает во всех браузерах.

Фуркан Рахамат
источник
1

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

... И если вы хотите установить или изменить изображение (на примере #foo):

JQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";
Patch92
источник
1

Многие решения, найденные здесь, имеют некоторые ограничения: некоторые не работают в IE (объектно-ориентированный) или более старых браузерах, другие решения не масштабируют изображения (только уменьшают его), многие решения не поддерживают изменение размера окна, и многие не универсальный, ожидайте фиксированного разрешения или макета (книжная или альбомная)

Если использование javascript и jquery не является проблемой, у меня есть это решение на основе кода @Tatu Ulmanen. Я исправил некоторые проблемы и добавил код на случай, если изображение загружено динамически и недоступно в начале. По сути, идея состоит в том, чтобы иметь два разных правила CSS и применять их при необходимости: одно, когда ограничение является высотой, поэтому нам нужно показать черные полосы по бокам, и другое правило CSS, когда ограничение является шириной, поэтому нам нужно показать черные полосы сверху / снизу.

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
}); 

Для такого элемента HTML, как:

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/> 
jolumg
источник