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!
No comments:
Post a Comment