title: inline-block max-width not working in firefox
body: <p>I need to wrap several images inside a div width a static padding. Div must be horizontally centered. And I need it to be responsive, i.e. max-width of div (including padding) must be set to 100%.</p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;img src="http://placehold.it/350x150"/&gt;
      &lt;br/&gt;
      &lt;img src="http://placehold.it/250x150"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body {
      text-align:center;
  }
  .content {
      padding:20px;
      background-color:red;
      display:inline-block;
  }
  img {
      max-width:100%;
      height:auto;
  }
  </code></pre>
  
  <p>(<a href="http://jsfiddle.net/Nu8nV/" rel="noreferrer">http://jsfiddle.net/Nu8nV/</a>) </p>
  
  <p>This sample works fine in Chrome and Safari, but not in Firefox (images are cropped when scaling down the width). Has anyone a solution? </p>