Flexible Image and IE

I was working on a top-secret project when I struck a conundrum. You see, I needed a flexible-width image that would work in all browsers.

The typical method of achieving this is the either use the Flexible Image action by Softpress, or to open the extended dialog and enter this:

These seem fine and dandy: Safari, Chrome, and Firefox on a Mac? Check. Chrome and Firefox on Windows 7? Check. IE8 and IE9 on Windows 7? Uh...Not cool.


Here is the mobile version of spokanecivilwar.com in Chrome on Win 7:

And here it is in IE9:

See any difference? The image, when using height:auto; flattens to a 1 pixel high pancake in IE. On a mobile-only site I wouldn't worry about this, as all the mobile browsers are fairly advanced and display the image properly. When this is being implemented on a desktop website however, it's really important that your images don't do this! Remember, IE8 and IE9 account for almost 50% of all browser usage!

How do we work around this predicament? Simple. Right-click on the image in question, and click on "extended" in the menu. Now, go to the ing style tab, and click "add". In the name field, enter width and for the value use auto. Now, do the same for height: auto; and max-width:100%;. It should look like this:

As always, test it out to verify that it's working. You now should have a IE friendly flexible-width image! Do you have another method that works well, or did this help you? Let me know in the comments below!