Scaling Images in IE8 with CSS max-width

Posted on

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:

var imgs, i, w;
var imgs = document.getElementsByTagName( 'img' );
for( i = 0; i < imgs.length; i++ ) {
	w = imgs[i].getAttribute( 'width' );
	if ( 615 < w ) {
		imgs[i].removeAttribute( 'width' );
		imgs[i].removeAttribute( 'height' );
	}
}

I put this code in my theme’s footer.php file and I was sure to tell it only to fire in IE8 with conditional tags:

<![endif]--><!--[if IE 8]>

What do you think?

Have you faced this issue before? If so, did you handle it differently? Please share your solutions in the comments section.

10 Comments Comments are closed

  1. The Frosty April 17, 2011 at 4:57 pm

    How about the new CSS3 image aspect ratios?

    img {
        height: 100px;
        width: 100px;
        object-fit: contain; /*'fill' or 'cover'*/
        object-position: 50%;
    }
    

    Just read about this in the latest dot net magazine.

  2. Andrew TG May 5, 2011 at 1:07 pm

    Hi Michael,

    you can add

    width: auto;
    

    then it’ll work :)

  3. Michael Fields May 5, 2011 at 2:30 pm

    @andrew I can’t get width:auto to work in any browser, that’s why I went with width:100%

  4. Michael Fields May 5, 2011 at 2:31 pm

    @Frosty Thanks for the tip. Will definitely have to look into this method. Does it work in IE?

  5. Andrew TG May 6, 2011 at 7:04 am

    Hi Michael,

    I have had similar problem like yours,
    and adding the code I mentioned above (in my case)
    actually works fine to all browsers

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

    anyways, I’m hoping soon, browsers will uniformly implement css. So we don’t have to put extra css (hacks). They’re a big headache.

  6. Michael Fields May 6, 2011 at 7:31 pm

    Andrew,
    Thank you so much for posting this! I just got a chance to test it and this solution works perfectly. You rock! Will post a follow up to this sometime soon.

  7. Michael Fields May 6, 2011 at 7:57 pm

    Andrew,

    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.

  8. Larry May 20, 2011 at 9:07 am

    Hi Michael,

    My colleague and I have been fighting with this same issue for a few hours, and then came across your post!

    I took

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

    and simply changed it to

    img {
    max-width: 100%;
    width: auto;
    height: auto;
    }

    This way all my img’s are no wider than the container my content sits in (I use .full-width, .col for primary, and .sidebar for secondary content, all with declared widths).

    Seems to work fine on all images in IE8, I haven’t yet checked to see what the effect in IE7 is.

    Should sort out your problem with images extending outside of their container, as I managed to replicate the problem before changing width to 100%.

    Thanks for writing up on this – we may have been battling away with calculating heights if not for your post!

  9. vanarie May 25, 2011 at 8:11 pm

    Thanks, I’ve been working on image auto-scaling with different jquery/js routines. In the end it was more hassle than using a simple CSS that seems to work in most browsers/versions:

    img, .imgclass {
    max-width: 100%;
    width: auto;
    height: auto;
    }

  10. Larry November 24, 2011 at 8:58 am

    Michael, I came across a related issue that affects all non Webkit browsers.

    The spec for

    max-width

    is defined to not apply for inline elements.

    Webkit seems to be the only engine that doesn’t require the img tag to have an immediate parent with a defined width.

    I have found on IE9, FF, and Opera that an anchor holding an img will break its container if the img is wider than the container, and the anchor has no defined width.

    For all other browsers it would be a good idea to ensure that the immediate parent of img’s where max-width is applied, have a defined width themselves (where possible).

Fork me on GitHub