Flexible Images in Freeway

12 Feb 2013
Reading mode: LightDark

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 entering this:

Freeway "Extended" dialog with width set to 100% and height set to auto

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:

Screenshot showing flexible width image working properly in Chrome

And here it is in IE9:

Screenshot showing flexible image collapsing in IE 9

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 “img 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!

Published on 12 Feb 2013 by Caleb Grove.

Agree? Disagree? Did it work? Want to say thanks? @reply me on Twitter.

Love it? Subscribe to the RSS feed.

Related Posts