Welcome Guest, Not a member yet? Register   Sign In
Image Resizing and Fitting inside a box

I've been using the image resizer, which resizes images to a set dimensions which is fine.

However my colleague wants it so that the image being resized always fits in a box (I think the method is called "Bounding Box"), regardless of whether the image being uploaded is portrait or landscape.

Box is 200 wide and 100 high.
Any image, regardless of whether its landscape/portrait must fit this box when rescaling occurs.

I am not sure how to go about doing this using the library; every time I try the ratios make the resulting thumbnailing image never fills the box.

A similar effect can be seen on facebook where they seem to have set portrait thumbnails and set landscape thumbnail boxes.

What is the best way to go around making thumbnails that fit inside a box?


did you turn off "maintain_ratio"? It sounds like you are trying to resize while keeping a ratio.
If you want the box to be completely filled, do not use the old ratio but hte one you specify

I don't think he wants the box completely filled, I think he just wants to make sure the image fits in the box regardless of whether it's a landscape or portrait image. In this case the box is landscape shape so if you want to fit a portrait image into it, the max height of the image will be 100px and the width will be (to keep things in proportion) less than 100px.

Unfortunately I don't know if the image lib can do that for you.

I just thought I would have a say anyway! But if anyone knows how to achieve it I'd like to hear the answer!

[eluser]Jeroen Brussich[/eluser]
And speaking of facebook, they actually cheat with the profile-images.
First they cut around the corners so that the image ratio is right for the image-box, then they resize the image to fill the box.

Hello there.

Yes, I keep the maintain_radio=true because I want to keep the ratio, as otherwise any thumbnails will look strange and out of proportion.

@flemming has it correct, I'm after a solution where the image fills/fits a box regards of the original image dimensions.

My colleague wants it so that if the image is too small it should center the image too, which is probably sounds like creating a whole new image with the thumbnail centered/centered. This is something I'm not going to be able to resolve, but I am interested in resolving the larger issue of scaling an image into a box.

@Jeroen, Am I right that the best way to resolve this is to crop a temporary clone of the image, resize it and use this as the profile image (Unless its done on the fly or something).

If there is a solution to resolve this, that'd be great.

Check out this thread

That's a nifty solution Mat-Moo! I've bookmarked your thread as i'm sure I'll need to refer to it soon!

Maybe you can resize image to width you need, and put that image as background to div container which holds exact width and height you need.

Thanks for your help, hopefully I can use this as a stepping stone to a more overall solution.

Theme © iAndrew 2016 - Forum software by © MyBB