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

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

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

или

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

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

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

Обновление 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);
 })
})

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

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

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

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

Благодаря CSS3

img
{
   object-fit: contain;
}

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

IE и EDGE как всегда аутсайдеры: http://caniuse.com/#feat=object-fit

Обновление 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;

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

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

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

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

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

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

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

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

Вы можете использовать object-fit: cover;на родительском div.

https://css-tricks.com/almanac/properties/o/object-fit/

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

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

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

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

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

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

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

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

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

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

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

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