views:

73

answers:

5

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?

A: 

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.
David Dorward
Who mentioned using the browser to 'resize' the images?
zaf
hmm, silly assumption on my part. I've deleted that aside. It doesn't change any of the rest of the answer though.
David Dorward
Yes, may be crop will also be an option but what if the main theme of the image is cropped off. It might sound impossible but if there is a way, please tell me
Starx
@David Dorward the second bullet point in your additional edits sounds familiar....
zaf
@zaf — it preceded you editing your question to make it apparent that that is what you were trying to say … hmm, no it was ~1min later … it preceded me noticing your edit (and it actually gives a clue about how to go about it).
David Dorward
@Starx — then, if you go with cropping, someone will need to manually check that the result is acceptable (or manually crop it, it is possible to build a UI in JS to mark out a crop region at a fixed ratio).
David Dorward
A: 

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

zaf
Isn't that what Starx is asking?
David Dorward
No he is not! He tried fixing the width and that didn't work. He tried fixing the height and that didn't work. He has not tried to resize the image within a given rectangle.
zaf
@zaf, sorry for the confusion, but I was asking that?
Starx
"If I fixed their height and widht, they will appear streched?" sure sounds like "a specific rectangle" to me.
David Dorward
@David Dorward "fit" != "If I fixed their height and widht, they will appear streched?".
zaf
@David, yes. If I add this image inside a division and fixed its height and width and set its overflow:hidden, then only a small part of image is shown if the image is big one.
Starx
@Starx so you want the code to that for you?
zaf
@zaf And how do you propose to fit the image in a specific rectangle without fixing the height and width? It's possible there is a good idea lurking under your answer, but there isn't anywhere near enough information in it to tell.
David Dorward
@David Dorward silly of me, I didn't mention the aspect ratio. Updated.
zaf
A: 

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.

Anton
Yes I resize them to certain width and height and keep their ratio. The problem now is while displaying them, if the image is long even though it is resized, it pushes other elements to the back of the page. I want to fix how they are displayed in a fixed container without the messing up the ratio or scaling them.
Starx
A: 

you can use a div with overflow hidden

Grumpy
+3  A: 

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

Dazarath