Resize a photo in HTML and keep aspect ratio

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

As you are using Drupal, you will be wanting the Imagecache module (http://drupal.org/project/imagecache). 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 (http://drupal.org/node/120641)