Question

I have a function I’m using to determine the absolute maximum size an image can be (while retaining its aspect ratio) within a particular rectangle. The code I’m currently using is definitely wrong but I’m not sure where I went wrong.

// Sets the image to the largest proportional size possible
// based on the current browser window dimensions and original
// image size specified by the image loader
function applyLargestProportionalSize() {
    var maxWidth = <width of container>;
    var maxHeight = <height of container>;

    var realWidth = <actual image width>;
    var realHeight = <actual image height>;

    if (realWidth < realHeight && maxWidth > maxHeight) {
        var scaledWidth = Math.min(realWidth, maxWidth);
        $('img').css('width', scaledWidth);
        // let height be determined by the browser
    } else {
        var scaledHeight = Math.min(realHeight, maxHeight);
        $('img').css('height', scaledHeight);
        // let width be determined by the browser
    }
}

Answer 1

I don’t know javascript, but the problem is that your code can handle only the cases in which the aspect ratio of the container is less than one, and the aspect ratio of the image is greater than one (or maybe I have that backwards, I’m not sure of the exact definition of aspect ratio). Try this:

if (realWidth/realHeight > maxWidth/maxHeight) {
  // everything else the same