Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I would like to display photos that I upload (to my drupal site) and I would like to make the photos smallers but using heigh=100 does not honour the aspect ratio. All i want to do is make the photo zoom smaller.

share|improve this question
Do you only want to show them smaller (simply only specify the height and not the width)? Or do you actually want to create thumbnails (that are also smaller in download size -- which however might not matter if you expect your visitors to click through to the larger photo after all)? – Arjan Oct 9 '09 at 21:49
I want a to create smaller Thumbnails size ones. I don't want it to be click able. (Im trying to make a profile page of all the players on a softball team, in order to have all the players on one page I want smaller pics) – thegreyspot Oct 10 '09 at 2:57
up vote 3 down vote accepted

If you only specify the width, or the height, but not both, you do preserve the aspect ratio, so you are probably accidentally inheriting a width=100% or something. Inspect the element with Firebug or Safari's inspector.

If you're worried about what will happen to a photo that is not 4:3 or 3:4, such as user submitted photos of panoramas, then you might consider both a max-height and max-width, or an overflow: none; on the containing block.

share|improve this answer
How would he determine which one to specify if the images' dimensions are not uniform? – i-g Oct 10 '09 at 0:33
You determine which one to specify based on what's most important to your layout. It's usually the width inside main content or side-bars and height inside headers or footers. – dlamblin Oct 12 '09 at 14:23

You can accomplish this with a stylesheet. First, define the following style:

.thumb {
  max-width: 100px;
  max-height: 100px;
  width: expression(this.width > 100 ? "100px" : true);
  height: expression(this.height > 100 ? "100px" : true);

Then, add this style to your image tags, like so:

<img class="thumb" ...>

Do not include the height and width elements this time.

The first half of that style is for browsers that support the max-width and max-height properties -- Chrome, Firefox, Opera, and Safari. The second half is a hack for IE, which doesn't.

Source: Image Max Width & Height

Thanks for the feedback, Diago.

share|improve this answer
Please supply more information then just a link. SU is a canonical source of information and if the link expires this answer will have no further value. – BinaryMisfit Oct 9 '09 at 21:58
If I use that doesnt it mean that I will crop some of the picture away? – thegreyspot Oct 10 '09 at 2:59
Have you tried it? – i-g Oct 10 '09 at 5:26
What I meant to say was, this is the solution you were looking for. Please try it, because I tested it before posting. It works. – i-g Oct 13 '09 at 21:47

If you are trying to display thumbnails, just setting the size is a bad idea. The full size image is still downloaded to the users computer and resized there. This uses up their bandwidth and processor power and makes your site slow to load. Far better to create thumbnails at the right size and upload those.

The full size image could be loaded on a click through from the thumbnail - if that was what you wanted.

If you do want to change the size on the page you need to make sure that:

new_width = new_height * (old_width / old_height)

to preserve the aspect ratio of the image.

Though as dlamblin points out just changing one value should preserve the aspect ratio.

share|improve this answer

Since you mention Drupal, there are various modules for Drupal to handle and manipulate images. They will allow you to configure your Drupal site so this is done automatically. Most probably, you need Image. But you may explore Image Resize Filter.

share|improve this answer
Unfortunately I dont have root level access so I cant install anything on the server – thegreyspot Oct 10 '09 at 18:25

Kompozer is a WYSIWYG editor that can do that automatically. You Might Give it a try.

share|improve this answer

As you are using Drupal, you will be wanting the Imagecache module ( Although you say you don't have root access, you don't need this to add Drupal modules - you just need ftp access and an admin account on your Drupal site (

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .