How to Resize Images Proportionally/Keeping the Aspect Ratio

How to resize images proportionally / keeping the aspect ratio?

Have a look at this piece of code from http://ericjuden.com/2009/07/jquery-image-resize/

$(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
            height = height * ratio;    // Reset height to match scaled image
        }
    });
});

Algorithm to resize an image proportionally keeping it as close as possible to given dimensions

If you don't care about rounding errors

Let

ratio = min(image_width / reference_width, image_height / reference_height)

and return

image_width / ratio
image_height / ratio

---

If you do care about rounding errors

Find the greatest common divisor GCD of image_width and image_height. The smallest image you can make with the exact same aspect ratio has dimensions

image_width' = image_width / GCD
image_height' = image_height / GCD

Every larger image with the exact same aspect ratio is an integer multiple of those. So, let

ratio_width = ceil(reference_width / image_width')
ratio_height = ceil(reference_heigth / image_heigth')

and

ratio = max(ratio_width, ratio_height)

then your result is

ratio * image_width'
ratio * image_height'

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Image resize - maintain aspect ratio

Why don't you use originalImage.getWidth() and originalImage.getHeight()? Then you can easily calculate aspect ratio. Don't forget that int/int = int, so you need to do

double ratio = 1.0 * originalImage.getWidth() / originalImage.getHeight();

or 

double ratio = (double) originalImage.getWidth() / originalImage.getHeight();

Regarding the additional math, you can calculate

int height = (int) IMG_WIDTH/ratio;

int width = (int) IMG_HEIGHT*ratio;

Then see which one fits your needs better and resize to (IMG_WIDTH, height) or (width, IMG_HEIGHT)

Java image resize, maintain aspect ratio

Here we go:

Dimension imgSize = new Dimension(500, 100);
Dimension boundary = new Dimension(200, 200);

Function to return the new size depending on the boundary:

public static Dimension getScaledDimension(Dimension imgSize, Dimension boundary) {

    int original_width = imgSize.width;
    int original_height = imgSize.height;
    int bound_width = boundary.width;
    int bound_height = boundary.height;
    int new_width = original_width;
    int new_height = original_height;

    // first check if we need to scale width
    if (original_width > bound_width) {
        //scale width to fit
        new_width = bound_width;
        //scale height to maintain aspect ratio
        new_height = (new_width * original_height) / original_width;
    }

    // then check if we need to scale even with the new height
    if (new_height > bound_height) {
        //scale height to fit instead
        new_height = bound_height;
        //scale width to maintain aspect ratio
        new_width = (new_height * original_width) / original_height;
    }

    return new Dimension(new_width, new_height);
}

In case anyone also needs the image resizing code, here is a decent solution.

If you're unsure about the above solution, there are different ways to achieve the same result.

How to smart resize a displayed image to original aspect ratio

If I'm interpreting your spec correctly, you want a result that is no larger than the one the end-user laid out originally; you want one of the two dimensions to shrink, and the other to stay the same. In other words, the new size should fill the designer space in one direction while shortening the size in the other direction to retain the original aspect ratio.

original_ratio = original_width / original_height
designer_ratio = designer_width / designer_height
if original_ratio > designer_ratio
    designer_height = designer_width / original_ratio
else
    designer_width = designer_height * original_ratio

Often you'll be working with integer coordinates, but the divisions to produce the ratios above need to be floating point. Here's a rearrangement of the formula to be more integer friendly. Make sure your integers have the range to handle the maximum width*height.

if original_width * designer_height > designer_width * original_height
    designer_height = (designer_width * original_height) / original_width
else
    designer_width = (designer_height * original_width) / original_height

---

Related Topics