jQuery Image Resize

Eric Juden — Wed, 08 Jul 2009 13:44:06 +0000

Let me start off by saying, I LOVE jQuery! It’s the greatest thing since sliced bread! Now that I have that out of the way, I’ve been working on developing some WordPress themes for work. We are going to be launching a blogs site (using WordPress MU) fairly soon for faculty, staff, and eventually students. So, in the process we are building a blog that will be used as an online newsletter. On the blog page, they want the top story to take precedence, and for the image to be larger. So to accomplish this, I wanted to scale down the other images and keep the aspect ratio. Enter jQuery…

I was looking out there at some of the solutions already completed. I didn’t see anything that quite did what I was looking for. So I made my own function:

$(document).ready(function() {
    $('.story-small img').each(function() {
        var maxWidth = 100; // Max width for the image
        var maxHeight = 100;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height
 
        // Check if the current width is larger than the max
        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }
 
        // Check if current height is larger than max
        if(height > maxHeight){
            ratio = maxHeight / height; // get ratio for scaling image
            $(this).css("height", maxHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
        }
    });
});

The 2nd line of code says to grab every image with a class of ‘story-small’. The block for the height is just a safety net. I have it there in case the height is still larger than the max. There are a hundred ways to skin a cat, so I’m sure there are plenty of other ways to do this.

Eric Juden » image

jQuery Image Resize