Most elegant image to image frame comparison algorithm

I'm interested in finding the most elegant and 'correct' solution to this problem. I'm new to JS/PHP and I'm really excited to be working with it. The goal is to compare the size of a given image to the size of a 'frame' for the image (going to be a ` or

• eventually) and resize the image accordingly. Users will be uploading images of many sizes and shapes and there are going to be many sizes and shapes of frames. The goal is to make sure that any given image will be correctly resized to fit any given frame. Additionally, images will be cropped with overflow:hidden; so they'll never be distorted. Final implementation will be in PHP, but I'm working out the logic in JS. Here's what I have:




``
//predefined variables generated dynamically from other parts of script, these are example values showing the 'landscape in landscape' ratio issue
var $imageHeight = 150, $imageWidth = 310, $height = 240, $width = 300;
//check image orientation
if ( $imageHeight == $imageWidth ) {
var $imageType = 1; // square image
} else if ( $imageHeight > $imageWidth ) {
var $imageType = 2; // portrait image
} else {
var $imageType = 3; // landscape image
};
//check frame orientation and compare to image orientation
if ( $height == $width) { //square frame
if ( ( $imageType === 1 ) || ( $imageType === 3 ) ) {
$deferToHeight = true;
} else {
$deferToHeight = false;
};
} else if ( $height > $width ) { //portrait frame
if ( ( $imageType === 1 ) || ( $imageType === 3 ) ) {
$deferToHeight = true;
} else {
if (($imageHeight / $height) 1) {
$deferToHeight = true;
} else {
$deferToHeight = false;
};
};
};
//set values to match (null value scales proportionately)
if ($deferToHeight == true) { //defer image size to height of frame
$imageWidth = null;
$imageHeight = $height;
} else { //defer image size to width of frame
$imageWidth = $width;
$image

If we move past rewriting the boolean expressions and instead rework the formulas, I think we can get something a little easier to manage.

If I understand correctly, your goal is to have the image cover the frame. That is to say, for the frame to be filled and the image cropped.

In that case, All we need to do is scale the image to the frame.

var imageHeight = 150, imageWidth = 310, height = 240, width = 300;

//Find the larget discrepancy between frame size and corresponding image size
var scaleRatio = Math.max( height/imageHeight, width/imageWidth );

//Apply the scale to the whole image.
imageHeight *= scaleRatio;
imageWidth *= scaleRatio;

If instead your desire it to have the image fit in the frame, then all we need to do is replace Math.max with Math.min.

StackExchange Code Review Q#9022, answer score: 2