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;
}

Powyższy CSS pochodzi zTwitter Bootstrap co pozwala na responsywne obrazy. Jedynym problemem jest to, że nie ma to wpływu na Firefox i IE.

W następującym przypadku:

<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/ - Oto strona pokazująca problem.

W Firefoksie lub IE zmniejsz stronę do poniżej 432px, a zobaczysz, że obrazy nie podążają już za maksymalną szerokością (podczas gdy robią to powyżej 764px).

Jak mogę to naprawić - bez korzystania z kontenerów obrazów - aby sprawne obrazy działały w Firefoksie i IE?