title: css image max-width not working with Firefox / IE
body: <p>Here's a <a href="http://jsfiddle.net/NrCGb/594/" rel="nofollow noreferrer">JsFiddle</a>.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1"&gt;
  &lt;div data-role="page" &gt;
      &lt;div id="contentwrap"&gt;
          &lt;div id="content" data-role="content"&gt;
               &lt;img width="300" src="http://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png" /&gt;
  
            asdad asd asd asd   sadadada ad sad asd asd asd asd sadasdaad adsa dasd sa
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>html, body {
  height: 100%;
  }
  
  #contentwrap {
  display: table;
  height: 100%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  }
  
  #contentwrap img {
  margin-left: auto;
  margin-right: auto;
  display:block;
  margin-bottom: 10px;
  
  max-width:100%;
  }
  
  #content {
  height: 100%;
  display: table-cell;
  text-align:center;
  vertical-align:middle;
  }
  </code></pre>
  
  <p>As you can see if you test it, the "max-width: 100%" attribute only works on Google Chrome. With Firefox and IE, the image width stay the same... With Chrome, the image adapt to the window... :</p>
  
  <p><img src="https://i.stack.imgur.com/0ALGY.png" alt="enter image description here"></p>
  
  <p>How can I fix it ? (at least with IE11)</p>
  
  <p>I found other posts with the same problem but none gave a good solution...</p>