How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

Tom Wright picture Tom Wright · Apr 16, 2009 · Viewed 172.2k times · Source

Here's the problem. I have an image:

<img alt="alttext" src="filename.jpg"/>

Note no height or width specified.

On certain pages I want to only show a thumbnail. I can't alter the html, so I use the following CSS:

.blog_list div.postbody img { width:75px; }

Which (in most browsers) makes a page of uniformly wide thumbnails, all with preserved aspect ratios.

In IE6 though, the image is only scaled in the dimension specified in the CSS. It retains the 'natural' height.

Here's an example of a pair of pages that illustrate the problem:

I'd be very grateful for all suggestions, but would like to point out that (due to the limitations of the clients chosen platform) I'm looking for something that doesn't involve modifying the html. CSS would also be preferable to javascript.

EDIT: Should mention that the images are of different sizes and aspect ratios.

Answer

Tom Wright picture Tom Wright · Apr 16, 2009

Adam Luter gave me the idea for this, but it actually turned out to be really simple:

img {
  width:  75px;
  height: auto;
}

IE6 now scales the image fine and this seems to be what all the other browsers use by default.

Thanks for both the answers though!