CODEWITHSUNDEEP
jquerymathheightwidth
matt
matt

Reputation: 44353

jquery: resize images in proportion data()-method?

i'm having the following code where i check onload what the original size of an image is:

        $(".post-body img").each(function() {  
            $(this).data('width', $(this).width());
            $(this).data('height', $(this).height());
        });

after that i'm resizing all images to the width of the parent div .post-body.

var bw = $('.post-body').width();
$(".post-body img").each(function() {
        // Check the width of the original image size
        if (bw < $(this).data('width')) {
            $(this).removeAttr('height');
            $(this).attr( 'width', bw ); 
            //$(this).attr( 'height', height-in-ratio ); 
        }
});

this works just fine! so i'm checking if the .post-body width is smaller than the original width of the image i'm resizing the image to the same width as the div.

however i think this is kind of buggy in some older versions of Internet Explorer because i'm removing the height-attribute of the image.

what is the easiest way to calculate the proportional height of an image if the old width and height is stored? i have a new width and i want to calculate the appropriate height.

i cannot seem to find an easy mathematical solution.

So again, i don't want to remove the height attribute from the image, but calculate the proportional height.

thank you for the tipp. regards

Upvotes: 1

Views: 722

Answers (1)

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124818

var newHeight = newWidth / oldWidth * oldHeight;

newWidth / oldWidth gives you the resize ratio. If the original width is 800 and new width 400, this ratio becomes 0.5. If your original height was 600 and you multiply it with this ratio, you get 300. 800x600 is the same ratio as 400x300.

Upvotes: 2

Related Questions