Dynamically scale images to fit a specified size width and height

Question

So after extensive research and tons of jQuery and Javascript solutions I simply could not find a way in which to dynamically scale images to a specified size both horizontally and vertically, I found tons of information on scaling to fit width wise and keep the aspect ratio, or scaling to fit height wise and keep the aspect ratio, but couldn't figure out whether the image was too tall or too short and adjust accordingly.

So in my example, I had a <div> with a set width of 460px and a set height of 280px, and i need the image to fit, all of itself into that area without stretching (maintaining its aspect ratio)

Answer 1

If I understand your question correctly, I simpler way of scaling images would be to use the following CSS styling rules:

max-width
max-height

These two styling rules alow you to specify the maximum width/height of an image. The browser will scale the image down (preserving the aspect ratio) to fit the size you specify. You can also use these two to specify a minimum width/height for an image:

min-width
min-height

Answer 2

Now after fiddling around with some width examples my classic algebra skills kicked in.

If I took the width and divided it by the height, so in this case, 460/280 you in return get 1.642... which is the aspect ratio of that area, now if I looked at the aspect ratio of the image, I knew that if it was greater than 1.642... that that meant it was wider than the area, and if the aspect ratio of the image was less than, that it was taller.

So I came up with the following,

// Set the Image in question
$image = 'img/gif/b47rz.gif';

// Set the width of the area and height of the area
$inputwidth = 460;
$inputheight = 280;

// Get the width and height of the Image
list($width,$height) = getimagesize($image);

// So then if the image is wider rather than taller, set the width and figure out the height
if (($width/$height) > ($inputwidth/$inputheight)) {
            $outputwidth = $inputwidth;
            $outputheight = ($inputwidth * $height)/ $width;
        }
// And if the image is taller rather than wider, then set the height and figure out the width
        elseif (($width/$height) < ($inputwidth/$inputheight)) {
            $outputwidth = ($inputheight * $width)/ $height;
            $outputheight = $inputheight;
        }
// And because it is entirely possible that the image could be the exact same size/aspect ratio of the desired area, so we have that covered as well
        elseif (($width/$height) == ($inputwidth/$inputheight)) {
            $outputwidth = $inputwidth;
            $outputheight = $inputheight;
            }
// Echo out the results and done
echo '<img src="'.$image.'" width="'.$outputwidth.'" height="'.$outputheight.'">';

And it worked perfectly, so I thought I would share, hopefully this helps some people