By Dr. Gianluigi Zane Zanettini

2016-03-13 16:17:30 8 Comments


myFunction(400, 300, 50, 100) => Must return the width and heigth to resize my 400x300 (1st and 2nd params) image proportionally. The resized image must be at minimum 50x100 (3rd and 4th params). It's totally ok to go 52x.. or ..x102 but the "oversize" must be as small as matematically possible to keep the aspect ratio.


I must write a function (I will use Javascript/Jquery, but let's not worry about the language: I'm interested in the logic) such as this:

[new_image_width, new_image_height] function(image_width, image_height, reference_width, reference_height)

This function takes:

  • image_width: the width of an image
  • image_height: the height of an image
  • reference_width: the desidered minimum width of the image (see below)
  • reference_height: the desidered minimum height of the image (see below)

It returns:

  • new_image_width: the proportionally resized width of the image (see below)
  • new_image_height: the proportionally resized height of the image (see below)

The function must calculate the closest width and height to respective "reference" parameter, without going below, and preserving the aspect ratio.

My function must not actually resize the image, only return the new integer to resize to.

Note: I'm confortable with code but 1st-grade-level with math. Please show some mercy :-(


@Vincent van der Weele 2016-03-13 16:52:34

If you don't care about rounding errors


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')


ratio = max(ratio_width, ratio_height)

then your result is

ratio * image_width'
ratio * image_height'

@Dr. Gianluigi Zane Zanettini 2016-03-13 22:05:52

The ratio formula is exactly what I was looking for. Thank you very much for your help.

@Karamell 2016-03-13 16:45:03

Alright, so try this:

function myFunction(image_width, image_height, reference_width, reference_height) {
    var proportion = image_width/image_height;
    if(reference_height*proportion < reference_width){
        return [reference_width, reference_width/proportion];
    } else {
        return [reference_height*proportion,reference_height];

Related Questions

Sponsored Content

9 Answered Questions

[SOLVED] Resize Image to fit in bounding box

24 Answered Questions

[SOLVED] Image Processing: Algorithm Improvement for 'Coca-Cola Can' Recognition

3 Answered Questions

[SOLVED] Resize image proportionally with MaxHeight and MaxWidth constraints

2 Answered Questions

[SOLVED] Resize only vertical images

2 Answered Questions

[SOLVED] Why resizing causes image size to decrease

1 Answered Questions

2 Answered Questions

1 Answered Questions

[SOLVED] jQuery dynamic proportional element/image resize

  • 2012-02-07 10:17:45
  • Odyss3us
  • 2816 View
  • 0 Score
  • 1 Answer
  • Tags:   jquery html css

Sponsored Content