How to "smart resize" a displayed image to original aspect ratio

Question

I have an application in which end-users can size and position images in a designer. Since the spec calls for the image to be "stretched" to the containing control, the end user can end up with an awkwardly stretched image.

To help the user with image sizing I am thinking of implementing a smart resizer function which would allow the the user to easily fix the aspect ratio of the picture so that it no longer appears stretched.

The quick way to solve this is to actually provide two options: 1) scale from width 2) scale from height. The user chooses the method and the algorithm adjusts the size of the picture by using the original aspect ratio. For example: A picture is displayed as 200x200 on the designer but the original image is 1024x768 pixels. The user chooses "Smart Size from width" and the new size becomes ~200x150 since the original aspect ratio is ~1.333

That's OK, but how could I make the algorithm smarter and not bother the user by asking which dimension the recalculation should be based on?

Answer 1

Calculate the new dimensions for both variants ("scale by width" and "scale by height"), then use the one that fits in the display.

Alternatively you could also calculate the the aspect ratio of the "bounding box" and compare it against the aspect ratio of the original image. Depending on which aspect ratio is larger, the height or the width needs to be scaled.

You also could restrict the resize process so that in all cases "scale by width" is done. Then, to change the size of the image, the user always has to change its width. The height will always be adjusted automatically.

Answer 2

Because you want to maximize showing as much as possible the scaled image (of the original) in your window, i.e. the area in your designer, you would take the larger of either the width or height of the original image, and scale that to 200. Pseudo-code (width, height are dimensions of original):

if (width > height) {
    scaledWidth = 200;
    scaledHeight = (height * 200) / width;
} else {
    scaledHeight = 200;
    scaledWidth = (width * 200) / height;
}

Answer 3

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.

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

Answer 4

You just need to work out the scale needed for both dimensions and then take the smaller of the 2.