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

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

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

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

или

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

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

<div> имеет размер, заданный в процентах от экрана, что также непредсказуемо.

Ответы

Ответ 1

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

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

.container img {
   width: 100%;
}

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

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>

Script

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

Ответ 2

Не идеальное решение, но этот 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%;
}

Ответ 3

Существует гораздо более простой способ сделать это, используя только 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 без искажений.

Ответ 4

Если вы можете, используйте фоновые изображения и установите 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%);
}

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

Ответ 6

Это невозможно с помощью только 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(), когда пользователь изменяет размер окна, изображение будет корректироваться.

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

Ответ 7

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

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

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

Ответ 8

Я столкнулся с этим вопросом в поисках имитационной проблемы. Я создаю веб-страницу с отзывчивым дизайном, а ширина элементов, размещенных на странице, равна проценту ширины экрана. Высота задается значением 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>

Ответ 9

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

img{
   object-fit: contain;
   max-height: 70px;
}

Ответ 10

Используя этот метод, вы можете заполнить свой 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;
}

Ответ 12

Это сделало трюк для меня

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

Ответ 13

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

Применить...

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

для изображения.

Ответ 14

если вы работаете с тегом 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? Благодаря

Ответ 15

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')";

Ответ 16

Многие из найденных здесь решений имеют некоторые ограничения: некоторые не работают в 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"/>

Ответ 17

У меня была похожая проблема. Я решил это только с помощью 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/

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

Ответ 18

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

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