title: Image mysteriously ignoring max-width in Firefox & IE
body: <p>So I'm trying to display images as big as possible with no cropping on any screen size. This means <code>height: 100%; width: auto</code> in <code>landscape</code> and <code>width: 100%; height: auto</code> in <code>portrait</code>.</p>
  
  <p>I'm serving up images that are big enough to fill retina iPads so pretty much every screen size will be scaling the images down. It does this fine in every browser &amp; orientation except Internet Explorer &amp; Firefox  in landscape mode, leaving them far too big for pretty much every screen. This is only in landscape, mind you.</p>
  
  <p>The relevant bits of code are:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
              #container {position:absolute; top:0; left: 0; right: 0; bottom:0; display: block;}
  
              #content {
                text-align: center;
                margin: 0px;
                  font-size:0;
                   position: absolute;
                  top:0; left: 0; right: 0; bottom: 0
              }
  
              #content:before {
                content: '';
                display: inline-block;
                height: 100%; 
                vertical-align: middle;
                margin-right: -0.25em; 
               }
  
              .sponsor {
                display: inline-block;
                vertical-align: middle;
               }
  
               #content img {
                  max-width: 100%;
                  width: 100%;
                  height:auto;
              } 
  @media all and (orientation: landscape) {
                   #main {        
                      top:0;
                      display: block;  
                      width: 100%;
                      height: 100%;                       
                      margin:0px auto; 
                      text-align:center;
                       }
  
                      #content img {
                                  height:100%;
                                  width:auto;
                                  max-width:auto !important;
                                  max-height:100%;
                                  display:block;
                                  margin:0 auto;
                  }
  
  }
  &lt;/style&gt;
  
  &lt;div  id="content"&gt; 
   &lt;?php if (has_post_thumbnail( $post-&gt;ID ) ): ?&gt;
   &lt;?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ), 'single-post-thumbnail' ); ?&gt;              
           &lt;div title="Click to flip" class="sponsor"&gt;
  
                   &lt;a href="#" class="img-link"&gt; 
                          &lt;img src="&lt;?php echo $image[0]; ?&gt;" alt="" class="feat-1" style="display: block;" /&gt;
                      &lt;/a&gt;
  
                       &lt;a href="#"&gt; 
                        &lt;img src="&lt;?php echo kd_mfi_get_featured_image_url('featured-image-2', 'post', 'full'); ?&gt;" alt="" class="feat-2" style="display: none;" /&gt;
                      &lt;/a&gt;
  
              &lt;/div&gt;&lt;?php endif; ?&gt;
  &lt;/div&gt;&lt;!-- End div #content --&gt;
  </code></pre>
  
  <p>I'm not too bothered about older than IE9 but ideally would like to serve everything. However as long as I can serve IE9+ &amp; Firefox I'll be happy.</p>
  
  <p>Oh, and by the way - Inspector in Firefox is telling me that the <code>width:100%</code> rule is being followed, but clearly it is not.</p>
  
  <p>Many thanks in advance!</p>