title: CSS: Image max-width not working in Firefox and IE
body: <pre><code>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;
  }
  </code></pre>
  
  <p>The above CSS is taken from <a href="http://twitter.github.io/bootstrap/">Twitter Bootstrap</a> which allows for responsive images. The only problem is this has no effect in Firefox and IE.</p>
  
  <p>In the following case:</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
      &lt;div id="logo" class="span4"&gt;
          &lt;a href="&lt;?= home_url( '/' ) ?&gt;"&gt;&lt;img src="&lt;?= get_template_directory_uri() ?&gt;/assets/images/logo.png" /&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://dev.netcoding.net/lowsglass/about-us/">http://dev.netcoding.net/lowsglass/about-us/</a> - Here is a page showing the problem.</p>
  
  <p>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).</p>
  
  <p><strong>How can I fix this &ndash; without using image containers &ndash; to make responsive images work in Firefox and IE?</strong></p>