[FAQ] Scaling an image

[Spudinski]

It might not be asked allot, but I thought I'd share some knowledge on this topic.

Scaling images is simple right? just use CSS to quickly make it a square or rectangle, or whatever shape you want it to be.

Well, it is correct in some ways, but it scales the image as a square most of the times, by the way the developer has chosen, but the image is mostly distorted.

A developer should take into account that images are not all square, and they never will be, so they need to find a way to scale an image, without distorting the image to much by turning images into squares.

With basic mathematical knowledge, and a few of PHP's functions and libraries, one can scale the image to hold it's shape just on a smaller scale, making quality-loss allot less, and keeping the shape.

Original Image: link

So with normal styling, it would look like this;

[img=image.png]

Scaled Image: link

To adjust the image, so that it is displayed exactly on scale to the original/big image, we need to do some calculations.

The equation for this should be simple, right?

Original Height and Width: 409x1000

What we want: 150x150

height is 150 / 1000 that equals 0.15

width is 150 / 409 that equals 0.37

One problem with that, it would give us an image that is very small and totally off scale.

We need to use one of the equations, and then multiply it by the original height or width, thus, an if statement will do.

 

<?php
 $image_url = ''; // replace this with the image you want to be scaled
 echo '[img=' . $image_url . '] $config[0] || $height > $config[1]) { // if the width or hieght is greater than the specified ones
     $xr = $config[0] / $width; // specified width divided by the original width
     $yr = $config[1] / $height; // specified height divided by the original height
     if ($xr * $height < $config[1]) { // if the height is less than the width
         $rheight = ceil($xr * $height); // calculate the height, as it will be less than the width
         $rwidth = $config[0]; // the width doesnt need any further calculation
     } else { // if the width is less than the height
         $rwidth = ceil($yr * $width); // calculate the width, as it will be less than the height
         $rheight = $config[1]; // the height doesnt need any further calculation
     }
     echo ' style="width:' . $rwidth . 'px;' . 'height:' . $rheight . 'px"'; // we echo the correct values to scale it
 }

 echo ' />'; // close the img tag
?>

 

That will render the image as follows: link

You can try my online demonstration here: http://www.spudinski.com/dev/image_resize.php

Ask here if you have any questions.

References:

http://blackdennie.deviantart.com/art/EMO-boy-39066280

http://php.net/getimagesize

http://php.net/ceil

[Floydian]

Re: [FAQ] Scaling an image

That's phat Spudinski!

 

I took the liberty of modifying your code and making a javascript version of it, posted here.

[Joel]

Re: [FAQ] Scaling an image

Nice work, its cool :-P