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.

thegreyspot

Posted 2009-10-09T21:27:31.010

Reputation: 1 162

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 – 2009-10-09T21:49:30.467

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 – 2009-10-10T02:57:03.523

Answers

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.

dlamblin

Posted 2009-10-09T21:27:31.010

Reputation: 9 293

How would he determine which one to specify if the images' dimensions are not uniform? – i-g – 2009-10-10T00:33:35.107

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 – 2009-10-12T14:23:25.860

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.

i-g

Posted 2009-10-09T21:27:31.010

Reputation: 980

4Please 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 – 2009-10-09T21:58:36.797

If I use that doesnt it mean that I will crop some of the picture away? – thegreyspot – 2009-10-10T02:59:02.833

Have you tried it? – i-g – 2009-10-10T05:26:40.607

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 – 2009-10-13T21:47:09.557

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.

ChrisF

Posted 2009-10-09T21:27:31.010

Reputation: 39 650

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.

fgranger

Posted 2009-10-09T21:27:31.010

Reputation: 129

Unfortunately I dont have root level access so I cant install anything on the server – thegreyspot – 2009-10-10T18:25:08.393

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)

Mark B

Posted 2009-10-09T21:27:31.010

Reputation: 135

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

alpha1

Posted 2009-10-09T21:27:31.010

Reputation: 1 638