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.

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.