title: The final word on fluid images contained within percentage-based elements?
body: <p><em>Trolls: apologies for the long post, but I want this to be the go-to question on the subject, so I'm putting the time in to make it thorough.</em></p>
  
  <p>Take this HTML:</p>
  
  <pre><code>&lt;div class="parent"&gt;
    &lt;img class="child" src="some-image.jpg"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>html, body{
  
    width:100%;
    height:100%;
  
  }
  
  .parent{
  
    width:100%;
    height:80%;
  
    background-color:green; /* for better highlighting of issues */
  
  }
  </code></pre>
  
  <p>With my clients, I'm always finding the need to contain an image within a responsively-sized element, while maintaining its aspect ratio. This is by far the most common and frustrating cross-browser problem I run into. I've tried many solutions with varying success.</p>
  
  <p>Let me better describe what I'm after.</p>
  
  <p>Below is how Chrome interprets the above code:</p>
  
  <p><img src="https://i.stack.imgur.com/3kjX3.png" alt="example"></p>
  
  <p>What I want, in this example, is the image (orange with a central + sign) to be central to the parent (green area) and for it to be as wide as possible without growing above the height of the containing element. Similarly, if the image is really long and thin, the image should fill the width of the parent, and maintain ratio, ideally collapsing the height of the parent to accommodate, or at the very least staying central to the div.</p>
  
  <p>So...What have I (and many others) tried?</p>
  
  <p><strong>Attempt 1</strong></p>
  
  <p>Make the <code>.child</code> absolute and the <code>.parent</code> relative such that the child can be tricked into a central position using <code>margin:auto</code>, while maintaining the correct height.</p>
  
  <pre><code>.parent{
  
    position: relative;
  
    width:100%;
    height:80%;
  
    background-color:green;
  
  }
  
  .child{
  
    position:absolute;
  
    width:auto;
    height:100%;
  
    left:0;
    right:0;
    top:0;
    bottom:0;
  
    margin: auto;
  
  }
  </code></pre>
  
  <p>This results in this for Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/Je2AX.png" alt="attempt 1.1"></p>
  
  <p>Seems fine, but there are issues:</p>
  
  <ul>
  <li>The <code>margin:auto</code> trick doesn't work in IE7 or below</li>
  <li>The image only honours the <code>height:100%</code> CSS, so when the browser viewport is smaller in width, you get the following:</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/srvTX.png" alt="attempt 1.2"></p>
  
  <p><strong>Attempt 2</strong></p>
  
  <p>Use <code>max-width</code> and <code>max-height</code> to make the image as widthy/heighty as it can be.</p>
  
  <pre><code>.parent{
  
    width:100%;
    height:80%;
  
    text-align:center;
  
    background-color:green;
  
  }
  
  .child{
  
    max-height:100%;
    max-width:100%;
  
  }
  </code></pre>
  
  <p>This results in this in Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/oI73C.png" alt="attempt 2.1"></p>
  
  <p>Again, this is fine. But there are some issues:</p>
  
  <ul>
  <li>IE6 and below seem to make the image and the parent become slightly bigger than the <code>80%</code> defined height. Presumably because they don't support the <code>max-width</code> and <code>max-height</code> CSS properties?</li>
  <li>When the browser viewport becomes narrower than the height of the image allows, it does resize, but the image is no longer centred, and the height of the parent remains <code>80%</code> leaving our image to be rendered all alone at the top of the page. (In a perfect world, the parent element would shrink in height to accommodate the now-smaller image size. In a not-so-perfect world, the image would at least be centred vertically within the parent.):</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/5M4Iw.png" alt="attempt 2.2"></p>
  
  <p>These, so far, are the only partially acceptable solutions I've found without using JavaScript.</p>
  
  <p><strong>The Question</strong></p>
  
  <p>Are there any other pure CSS/HTML solutions which circumvent the stated issues?</p>
  
  <p>Am I asking too much of the box model?</p>