Scale images proportionally with CSS

Update: This work in most browsers. I’ve had some problem with Safari for Mac and IE6. I wrote a small jQuery-plugin that does the same thing, but works in all browsers. You can read more about it here.

When I recently redesigned my blog I made the content area a bit smaller, 500 pixels instead of 640. The problem was that all pictures in my previous posts were 640 pixels wide and would mess things up. But instead of resizing every image there is an easy fix thanks to CSS. The only thing needed is to set the max-width of the image-tag to 500, add a fallback for older, crappier browsers and all images will fit perfectly into the new design.

img{
height:100%;
max-width: 500px;
width: expression(this.width > 500 ? 500: true);
}

•