Home » Questions » Computers [ Ask a new question ]

Resize a photo in HTML and keep aspect ratio

Resize a photo in HTML and keep aspect ratio

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.

Asked by: Guest | Views: 247
Total answers/comments: 3
Guest [Entry]

"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."
Guest [Entry]

"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."
Guest [Entry]

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