MakeWebGames

# [FAQ] Scaling an image

## Recommended Posts

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.

So with normal styling, it would look like this;

`[img=image.png]`

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 || \$height > \$config) { // if the width or hieght is greater than the specified ones
\$xr = \$config / \$width; // specified width divided by the original width
\$yr = \$config / \$height; // specified height divided by the original height
if (\$xr * \$height < \$config) { // 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; // 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; // 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:

##### Share on other sites

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.

##### Share on other sites

Re: [FAQ] Scaling an image

Nice work, its cool :-P

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account. ×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×

• #### Marketplace

• Discord Chat
• PBBG Directory
×
• Create New...