1

I have three different-sized images placed side by side on my website and would like to have them resize based on the browser size using jQuery.

$(window).bind('load resize', function() {
    var windowheight = $(window).height();
    $('#pictures img').each(function() {
        $(this).height(windowheight);
    });
});

And in the CSS file I have:

#pictures img {
    width:auto;
    max-height:100%;
}

This code would be correct if every image had the same height, but I don't know which value to pass to the height() function considering all three images have different heights.

Any ideas?

Thanks in advance

leemon
  • 917
  • 4
  • 19
  • 47

2 Answers2

0

in your css

img {max-width:100%;max-height:100%;}

then you set also your container dimension in % so in fact you don't need javascript for that

NB1: a "real" resize for a perfect rendering should happen server side; but that'd be kinna slow on the fly

NB2: there are now, with modern browser solution for client-side resize (it's more complex than setting the height...)

mikakun
  • 2,203
  • 2
  • 16
  • 24
0

you can get the screen height and width (explained here and here) and then you can use some simple math to re-size you picture. something like

picture_new_height = (actual_picture_height) * (window_height / screen_height)
Community
  • 1
  • 1
Ankit
  • 680
  • 4
  • 17
  • Just one question, why do I need the screen height for this? – leemon Feb 03 '13 at 13:08
  • you need one fixed value so that you can divide it with.. it will give you the ratio of window height to screen height. e.g if your window's height is half of screen height then you image height also needs to be half of its original height. that is what we are doing in above calculation – Ankit Feb 03 '13 at 13:57