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

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

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

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

 <img src="http://sofru.miximages.com/size/url" style=" width : 100%;"> 

или

 <img src="http://sofru.miximages.com/size/url" style=" height : 100%;"> 

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

.

Размер

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

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

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

 .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

 


скрипт

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

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

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

HTML:

 

CSS:

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

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

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

CSS

 div { background-image: url(path/to/your/https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat/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

 

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

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

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

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

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

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

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

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

 

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, это легко.

Я сделал это:

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

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

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

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

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

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

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

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

HTML:

  

JSFiddle

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

JQuery:

 $("#foo").css("background-image", "url('path/to/https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat/image.png')"); 

JavaScript:

 document.getElementById("foo").style.backgroundImage = "url('path/to/https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat/image.png')"; 

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

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