Scaling Images in IE8 with CSS max-width

Posted on March 21, 2011

By Michael Fields

Now that I’ve officially dropped support for IE6 in my work (a little late to the party? you ask … sure, I hope you saved some cake) it seemed like a good time to start introducing more CSS2 into my code. One of the problems that I faced was allowing an image to scale proportionally if it is larger than a predetermined size.

This was a suggestion of WordPress Theme Review Team member Chip Bennett as an alternative to just chopping the images short by setting the container’s overflow property to auto.

This is something that I would never have thought to do in IE6. Why? Well, while the image gets resized, it looks completely horrible Ever resize a .jpg without bicubic resampling? This is the result of scaling an image via css in IE6. See CSS Tricks for a few screen captures from different browsers.

Here’s the code that should cause an image to scale proportionally in my content area:

.entry img {
max-width:615px
height:auto;
}

Simple enough. If the image is greater than 615 pixels wide, set the width to 615 and the height will automatically adjust. Works in Gecko, works in Webkit … IE8? No dice! Well, until you put it into compatibility mode. Somehow. IE8 will get this right only if it is set to behave like IE7.

I scoured the internet for solutions. I even made it into page three of Google search results! I came across a similar issue in a forum and one of the answers given was to write javascript the would delete the width and height attributes from all image tags. Unfortunately, there was no code example so I came up with the following solution:

Darn, it looks like I spoke too soon. While the code you posted works well in IE8 to proportionately scale an image in IE7 and IE8 without javascript, it has an unfortunate side effect. In the event that a larger image is scaled in the browser via the height and width attributes, width:auto; seems to override these attributes thus extending the image beyond the proportions set in html.

About

Hello, my name is Michael Fields and I’m a freelance web developer based in Portland, Oregon. I specialize in creating custom solutions for small businesses and individuals utilizing the WordPress publishing platform.