Как Вы расширяете изображение для заполнения <отделение> при хранении соотношения сторон изображения?
Я должен заставить это изображение простираться к максимальному размеру, возможному, не переполняясь, это <div> или скос изображения.
Я не могу предсказать соотношение сторон изображения, таким образом, нет никакого способа знать, использовать ли:
<img src="url" style="width: 100%;">или
<img src="url" style="height: 100%;">Я не могу использовать обоих (т.е. разработать = "ширина: 100%; высота: 100%";), потому что это расширит изображение для установки <div>.
<div> установили размер процентом экрана, который также непредсказуем.
2 ответа
Обновление 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);
})
})
Это невозможно с использованием только 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 () , когда пользователь изменяет размер окна, изображение будет изменяться.
Это не пытается центрировать изображение в контейнере, что могло бы возможно, но я думаю, это не то, что вам нужно.