Question

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:

• The list, which should show thumbnails
• A single blog post, which shows the full-size image.

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 1

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!