1

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

nickf
  • 537,072
  • 198
  • 649
  • 721
Steffi
  • 6,835
  • 25
  • 78
  • 123
  • 6
    Perhaps a slightly safer-for-work image could be used? – David Thomas Mar 16 '11 at 17:32
  • 1
    That image doesn't resize for me, except for the browser's native resizing (which you don't have to do anything to trigger.) – Pekka Mar 16 '11 at 17:33
  • That has nothing to do with google; that's a browser feature when displaying an image file (as opposed to an html file). – eykanal Mar 16 '11 at 17:35

2 Answers2

1

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.

Kalessin
  • 2,282
  • 2
  • 22
  • 24
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/

Hussein
  • 42,480
  • 25
  • 113
  • 143
  • Hey, your function is good but doesn't work if I resize by the height AND width. How can I do that ? – Steffi Mar 17 '11 at 16:55