Изменить размер изображения, как Google

У меня вопрос.

Как я могу пропорционально изменить размер изображения при изменении размера окна?

Пример, подобный изображениям Google: (Предупреждение: смутно NSFW) http://www.gnomecorp.fr/local/cache-vignettes/L160xH230/google-girljaf72-40c90.jpg

Спасибо

Источник

2 ответа

Решение

Вы можете использовать JQuery для достижения кросс-браузер. В приведенном примере, когда вы изменяете размер окна по горизонтали, размер изображения будет изменяться пропорционально.

var imgorgw = $('img').width(),
    winorgw = $(window).width();

$(window).resize(function() {
    var winnew = $(window).width();
    winnew <= imgorgw ? $('img').width(winnew) : $('img').width(imgorgw);
})

Проверьте рабочий пример на http://jsfiddle.net/zrPpa/2/

Источник

Эффект в вашем примере выполняется автоматически вашим веб-браузером.

Вы можете повторить этот эффект, объявив ширину и высоту элемента img в процентах в CSS. Убедитесь, что вы не указали явные атрибуты with и height в теге img.

Источник
Другие вопросы по тегам