问题:

I have a question.

How can I resize proportinally an image when window's height is resize ?

Example like Google images : (Warning: vaguely NSFW) http://www.gnomecorp.fr/local/cache-vignettes/L160xH230/google-girljaf72-40c90.jpg

Thanks

回答1:

You can use jQuery to achieve cross browser. In the example provided, when you resize your window horizontally, image will resize proportionally.

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

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

Check working example at http://jsfiddle.net/zrPpa/2/

回答2:

The effect in your example is performed automatically by your web browser.

You can replicate this effect by declaring the width and height of the img element as percentages in the CSS. Ensure that you do not specify explicit with and height attributes in the img tag.