CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
CIP
CIP

Reputation: 31

Dynamic Image Resizing

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

Upvotes: 3

Views: 1317

Answers (2)

almazmusic
almazmusic

Reputation: 154

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.

Upvotes: 1

Ryan
Ryan

Reputation: 22227

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.

Upvotes: 1

Related Questions