title: Absolutely positioned DIV's width not resizing based on child image
body: <p>I have an absolutely positioned div with a percentage height and an image in it. That image has a height of 100% and width of auto. When the height of the viewport is adjusted the absolute div will not adjust it's width and the images will either get cut off or you'll see the background of the div.</p>
  
  <p>Example: <a href="http://jsfiddle.net/Y5Cr7/" rel="nofollow">http://jsfiddle.net/Y5Cr7/</a></p>
  
  <p>CSS</p>
  
  <pre><code>div {
      position: absolute;
      overflow: hidden;
      height: 50%;
      bottom: 80px;
      left: 5%;
      background: blue;    
  }
  
  img {
      height: 100%;
      width: auto;
      display: block;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;p&gt;adjust the height of the viewport&lt;/p&gt;
  
  &lt;div&gt;
      &lt;img src="http://lorempixel.com/400/200" /&gt;
  &lt;/div&gt;
  </code></pre>