If you re trying to resize the 32x1 image so it fits within a 1000x1000 box, you shouldn t be resizing the height to be 1000. Instead, you should resize the width to 1000 and the height to 1000/32.

Some example code could be:

define(MAX_WIDTH, 1000);
define(MAX_HEIGHT, 1000);

if ($cur_width / MAX_WIDTH > $cur_height / MAX_HEIGHT)
{
   $new_width = MAX_WIDTH;
   $new_height = (int) ($cur_height * MAX_WIDTH / $cur_width);
}
else
{
   $new_width = (int) ($cur_width * MAX_HEIGHT / $cur_height);
   $new_height = MAX_HEIGHT;
}

This checks which of the dimensions is "bigger" relative to the dimensions of the box and sets $new_width and $new_height appropriately. Make sure to handle weird cases where one of the dimensions gets rounded down to 0 (ie. a 10000x1 image would probably end up as 1000x0).

If I understand correctly you want to keep the ratio. So why don t you use some image library to scale the image on either height or width and keep ratio.

If I fixed their height and widht, they will appear streched?

They ll be distorted if you change the ratio, and stretched if you change the size.

If I fixed their width, and if the height of the image is very long then also it will mess up the overall website.

The image will scale, keeping its original x-y ratio. Whether or not this "messes up the website" depends on the context.

If I fixed their height, and if the width of the image is very long then also it will mess up the overall website.

Ditto

How is the best way to fix this?

That depends on a number of factors, not least of which is what the purpose of the images is. Yes, we re back to context again.

If I make some assumptions about what you are trying to achieve, you essentially have two options:

• Crop the image (possibly after scaling it)
• Calculate the x-y ratio of the image, compare it to the x-y ratio of the space you want to put it in, use that to make a decision about scaling it (while maintaining aspect ratio) to the width of the space or the height of the space.

What about trying to fit (keeping the aspect ratio) the output image in a specific rectangle?

You can use a div with overflow: hidden;.