Is there a way to dynamically define how an image appear in a page or in certain layout?

Question

For so many time, I have encountered problems with managing image having abnormally long height or width.

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

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

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

The images I save in the local drive are saved maintaining the ratio? Let say user decides to upload image 1(height)*32(width). When he uploads this image, the script is made to resize the user uploaded image to height:1000px(just an example)

So the resulting image in 1000px(height)*32000(widht), you see now the image is abnormally large.

Now while displaying this image in a box of 1000px * 1000px, what is the best way to display this image?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

you can use a div with overflow hidden

Answer 5

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).