Search code examples
imageimage-processingcropimage-scalinguser-profile

How can I crop/scale user images so I can display fixed sized thumbnails without skewing and stretching?

I'm working on allowing users to upload profile pictures for my site. The classic example of what I'm trying to avoid is plentyoffish.com where each users image is skewed and looks very ugly:

alt text

So, how can I progmatically crop/create standard sized versions of an image without the skewing demonstrated above?

Solution

  • Well, you must have a maximum height and width, lets assume the image size you have available is square, say 100x100.

    When a user uploads an image get the dimensions of it, then work out which is greater, the height or the width.

    Then take the greatest measurement and get the ratio of that measurement to your target measurement, then use that ratio to scale both the height and width.

    So if the user uploads a picture of 500 height and 450 width, as the height is greatest you'd divide 100 by 500, your thumbnail size. This gives us .2 as the ratio. which means the width will become 90, so you would shrink to 100x90, and no distortion would occur.