Fit an image inside a container (centered) while maintaining its aspect ratio

image-fit-resize-math.js

var slotWidth = 100; // The width of the container
var slotHeight = 100;// The height of the container
var imgWidth = 200; // The width of the image to draw inside the container
var imgHeight = 200; // The height of the image to draw inside the container

var offsetTop = 0; // The offset of the image from the top of the container
var offsetLeft = 0;  // The offset of the image from the left of the container
var width = imgWidth; // the new image draw width
var height = imgHeight; // the new image draw height

if (imgWidth > slotWidth || imgHeight > slotHeight) {

    // get ratio of image width to height and make the image the same width as the container
    var ratio = imgHeight / imgWidth;
    width = slotWidth;
    height = slotWidth * ratio; // maintain aspect ratio
    
    // make sure the new size isn't taller than the container
    if (height > slotHeight) {
      
        // make the image the same height as the container
        ratio = imgWidth / imgHeight;
        width = slotHeight * ratio; // maintain aspect ratio
        height = slotHeight;
    }
}

// center image
offsetLeft = (slotWidth - width) / 2;
offsetTop = (slotHeight - height) / 2;