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)

Enfold

I wrote a jQuery plugin to handle this sort of thing, maybe it will help: #18839463 – Paderna

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

Enfold

I was googling for the same problem and then I found your function that works very well and save me a lot of time! thank you so much! :-) – Physiotherapy

Answer 2

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

Kenon

well yes, very true, however it was not perserving the aspect ratio, could have been doing it wrong, but it is what resulted in me just coming up with my own littler script to do it in php – Enfold

if you were using those css styling rules above (not width and height), it should always preserve aspect ratio. If it didn't it sound to me as though there is a bug somewhere along the pipeline. Check an online demo. If it still doesn't preserve aspect ratio, then you should file a bug with the browser vendor of the browser you are using. – Kenon

Thanks but I am not too worried about it, I really like the use of the PHP style one below – Enfold