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

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