Question

I have a script that uses this function to resize images onLoad and onResize:

/**
 * Calculates the display width of an image depending on its display height when it is resized.
 * @param displayHeight the resized height of the image
 * @param originalHeight the original height of the image
 * @param originalWidth the original width of the image
 * @return the display width
 */
function getDisplayWidth(displayHeight, originalHeight, originalWidth){
    var ratio = originalHeight/displayHeight,
        res = Math.round(originalWidth/ratio) || 1000;
    return res;
}

.. but I do NOT want to the image height to exceed 800px, infact it can even be a fixed at 800×530px size. I tried to return a fixed value to res but it doesn’t seem to work.

Thanks!

Answer 1

You just need to add an if statement to your function…

/**
 * Calculates the display width of an image depending on its display height when it is resized.
 * @param displayHeight the resized height of the image
 * @param originalHeight the original height of the image
 * @param originalWidth the original width of the image
 * @return the display width
 */
function getDisplayWidth(displayHeight, originalHeight, originalWidth){
    if (displayHeight > 800) displayHeight = 800;
    var ratio = originalHeight/displayHeight,
        res = Math.round(originalWidth/ratio) || 1000;
    return res;
}

When you set the width it will automatically set the height to the correct value of the width/height ratio. You can also get the height by passing a variable to getDisplayWidth and then when the function returns that variable will have the height, as defined by the max height condition.