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

Question

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

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

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

Спасибо

Answer 1

Вы можете использовать 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/

Answer 2

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

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