Dynamic Image Resizing

Question

I have an image on a webpage that needs to be stretched to fit the available space in the window whilst maintaining its proportion. Here's what I've got:

http://www.lammypictures.com/test/

I would like the large image to proportionally stretch to match the height and widths of the browser, minus the size of the divs to the left and bottom. Some example images of what I'm trying to achieve: http://lammypictures.com/test/example.gif

So the problem is 2 fold really; first i need to get the max height and width minus the link and image bars, secondly i need to resize the image on a browser resize whilst maintaining proportions.

Any help would be much appreciated.

Cheers CIP

Answer 1

You could try using jQuery ui scaling effect:

$(document).ready(function () {

    resizeImage(); // initialize

    $(window).resize(function () {
        resizeImage(); // initialize again when the window changes
    });

    function resizeImage() {
        var windowHeight = $(window).height() - $('#nav').height(),
            windowWidth = $(window).width(),
            percentage = 0;

        if (windowHeight >= windowWidth) {
            percentage = (windowWidth / $('#image').width() ) * 100;
        }
        else {
            percentage = ( windowHeight / $('#image').height() ) * 100;
        }

        $('#image').effect('scale', { percent : percentage }, 1);
    };
 });

Tested and works great, however, a few tweaks maybe needed to get it just the way you like it.

Answer 2

You may just not setup the image element width and height attributes, and write next styles:

.hentry img { max-width: 100%; }

And it will shrink relative to the minimum side.

P.S. But not in position: absolute; block which not have any size. Set up the parent block to relative positioning.