Наглядный пример масштабирования картинки при изменении окна браузера - просто картинка. Попробуйте поизменять окно браузера (я тестил в опере, хроме, ИЕ8 и мозилле): дело в том, что если расширяешь окно или сужаешь его по ширине, то ширина фото (аттрибут width) как бы стоит на месте, но если окно уменьшаешь или увеличиваешь по высоте, то фото масштабируется, т.е. изменяются оба атрибута width и height фотки (это не css!). Как достичь такого эффекта, если я, например, в div какой-то обособленный положу на экране фотку?
2 ответа
Не уверен, что правильно понял вашу задачу. Сделал изменение ширины картинки пропорционально изменению ширины окна браузера. Высоту, если надо, вычисляйте по аналогии. Посмотреть пример.
HTML
<div>
<p>Изменяйте размер окна</p>
<span></span>
</div>
<img src="http://www.apple-reviews.com/wp-content/uploads/iphone-5.jpg" alt="" />
CSS
p {
font-size: 16px;
color: #900;
margin-left: 50px;
}
JS
var pS = $(window).width() / 100;
var imgW = $('img').width();
$(window).resize(function(){
var percentW = $(this).width() / pS;
var newWidth = parseInt(imgW / 100 * percentW,10);
$('img').css('width', newWidth + 'px');
$('span').text('Текущая ширина картинки: ' + newWidth + 'px');
});
-
ну да в полне что-то подобное, только у вас наоборот немного, когда сужаешь, тогда width и height изменяетя, но это мелочи, главное чтобы пропорции сохранялись в любом окне браузера (любом браузере), ну и глобально - на любом устройстве, т.е. чтобы это адекватно выглядело даже на мобильном.– Smash2 мар 2012 в 16:21
-
Ммм... Вродк, как изменяются размеры и когда сужаешь окно, и когда расширяешь.– Deonis2 мар 2012 в 16:24
Для картинки, которую вы привели в качестве примера, используется мета-тег <meta name="viewport" content="width=device-width,height=device-height" />