title: CSS: How to make a div the same size as a height-constrained image
body: <p>I have been trying to make div the exact same size as an image, but I don't know the aspect ratio of the image and I wish the image to fit the entire height of the webpage.</p>
  
  <p>I have some experimentation at jsfiddle using display:inline-block</p>
  
  <p><a href="http://jsfiddle.net/jxKqp/4/" rel="nofollow">http://jsfiddle.net/jxKqp/4/</a></p>
  
  <p>and while it seems to look ok when the webpage is loaded in chrome, if the webpage is resized, it fails to conform properly. 
  In firefox it doesn't work at all.  Perhaps there's a better way to go about constraining a div to an image?</p>
  
  <p>Here's similar code inline</p>
  
  <pre><code>&lt;!HTML&gt;
  &lt;html&gt;
   &lt;head&gt;
   &lt;style type="text/css"&gt;
   .background_image {
     height:100%;
     width:auto;
     border: 5px solid #ff0000;
   }
   body {
    overflow:hidden;
   }
   div.container {
     position:relative;
     display:inline-block;
        border: 5px solid #00ff00;
    }
    div.inner {
       position:absolute;
       top:0;bottom:0;left:0;right:0;
       border: 5px solid #0000ff;
       border-style:groove;
       z-index:2;
       background:black;
       color:white;
       opacity:.5
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt; 
    &lt;img    src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Henry_ford_1919.jpg/470px-Henry_ford_1919.jpg" class="background_image"/&gt;
    &lt;div class="inner"&gt;
      I want to be same size as the image
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>​   `</p>