CSS: Image max-width not working in Firefox and IE

Question

img {
    max-width: 100% !important; /* Set a maxium relative to the parent */
    width: auto\9 !important; /* IE7-8 need help adjusting responsive images */
    height: auto; /* Scale the height according to the width, otherwise you get stretching */
    vertical-align: middle;
    border: 0;
    display: block;
    -ms-interpolation-mode: bicubic;
}

The above CSS is taken from Twitter Bootstrap which allows for responsive images. The only problem is this has no effect in Firefox and IE.

In the following case:

<div class="row-fluid">
    <div id="logo" class="span4">
        <a href="<?= home_url( '/' ) ?>"><img src="<?= get_template_directory_uri() ?>/assets/images/logo.png" /></a>
    </div>
</div>

http://dev.netcoding.net/lowsglass/about-us/ - Here is a page showing the problem.

In Firefox or IE, shrink the page to below 432px and you will see that the images do not follow max-width anymore (while above 764px they do).

How can I fix this – without using image containers – to make responsive images work in Firefox and IE?

Answer 1

I've struggled a lot with Firefox / IE and max-width, specifically when on elements of display: inline-block. I use the CSS only solution below to add my fixes.

// Styles for Firefox
@-moz-document url-prefix() {
    #logo img {
        width: 100%;
    }
}

// Styles for IE10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #logo img {
        width: 100%;
    }
}

Answer 2

Firefox fails to scale images with max-width/height if width/height is not defined. So there are two ways.

1. Set width and max-width:

width: 100%;
max-width: 100%;

2. Use max-width and max-height in vw and vh:

max-width: 90vw;

What means the image will have max 90% of visible width. Have fun!