Dynamic image resizing

Question

I have an image on a web page that needs to be stretched to fit the available space in the window, while maintaining its proportion. Here is what I have:

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

I would like the large image to be proportionally stretched to fit the height and width of the browser, minus the size of the divs on the left and bottom.

So, the problem is 2 times valid; first I need to get the maximum height and width minus the stripes of links and images, and secondly, I need to resize the image to the size of the browser, keeping the proportions.

Any help would be greatly appreciated.

CIP greetings

Answer 1

You can try using the 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, you may need a few tweaks to get it exactly the way you like it.

Answer 2

You can simply not set the width and height attributes of the image element and write the following styles:

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

And it will decrease relative to the minimum side.

PS But not in position: absolute; a block that has no size. Set the parent block to relative positioning.