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

Я не можу передбачити співвідношення сторін зображення, тому немає способу дізнатися, чи потрібно використовувати:

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

або

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

Я не можу використовувати обидва (тобто style = "width: 100%; висота: 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() подією, коли користувач змінює розмір вікна, зображення буде коригуватися.

Це не намагається зосереджувати зображення в контейнері, це було б можливо, але я думаю, що це не те, що ви шукаєте.

Встановіть ширину та висоту зовнішньої секції container. Потім скористайтеся стилями нижче в img:

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

Це допоможе вам зберегти співвідношення сторін зображення

Якщо ви хочете встановити максимальну ширину або висоту (щоб вона не була дуже великою), зберігаючи співвідношення сторін зображення, ви можете зробити це:

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; на батьківській діві.

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

Щоб зробити це зображення розтягнутимся до максимально можливого розміру, не переповнюючи його або перекошуючи зображення.

Застосувати ...

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

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

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

Але проблема Object-fit: coverне працювала в IE, і вона займала 100% ширину, а 100% висота і співвідношення сторін було спотворено. Іншими словами, ефекту масштабування зображення не було, якого я бачив у хромі.

Я прийняв підхід, щоб розташувати зображення всередині контейнера з абсолютним, а потім розмістити його прямо в центрі, використовуючи комбінацію:

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