Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have a site where users upload photos taken from their digital cameras. I want the photos to appear as big as possible, almost take up the entire screen. I also want all the thumbnails, of various users, and blown up photos, to have a uniform size so the design works on my site and everything lays out properly. Is this possible, or am I going to be stuck with different sized pictures because some people turned the camera on it's side to take a picture and got a picture way taller than wider. Do the pictures need to be a certain file format, certain size, etc?

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

You can store the photos just as they're uploaded and resize them in CSS. This is really the best option for displaying full screen, because you don't know what size screen your users will have.

However, the obvious limitation is that if you change the aspect ratio the photos will look wrong. Your options for photos which are in a different aspect ratio are:

  1. Add black bars to two sides to bring it into the correct ratio. This can be done with ImageMagick (libraries exist for PHP, Perl, probably Ruby and other languages) or in .Net it's a few lines with System.Drawing.
  2. Crop it automatically. (Ditto).
  3. Refuse to accept it and insist that the user crop it.
  4. Give the user a JS interface to select their crop - as 3 but saving them the effort of finding some image editing software.
  5. Do 1 but without changing the image by setting a width and height in CSS chosing by scaling with the aspect ratio constant until both dimensions are in bounds and then centring it on a black background.

In all cases, it's advisable to keep the original image around in case your layout changes.

share|improve this answer
add comment

IrfanView is a free desktop tool that you can use for batch resizing of images if you have a moderation process.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.