title: CSS - Set Div Width 100% and Resize Keeping Aspect Ratio
body: <p>I have a div with a background image that will overlay part of the header slideshow. I want the width of the div to always be 100% of the window size, even when the user re-sizes it. The height should change based on the aspect ratio of the background image. The dimensions of the background image is 1500x406.</p>
  
  <p>Here's the sample code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper" class="clearfix"&gt;
      &lt;div id="bg_img"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
  <strong>CSS</strong></p>
  
  <pre><code>.clearfix {
      width: 100%;
      position: relative;
      display: block;
      margin: 0;
      padding: 0;
      border: 0;
      line-height: 1.5;
  }
  
  #bg_img {
      background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
      position: absolute;
      z-index: 100;
      top: 9em;
      width: 100%;
      height: 406px;
      margin: 0 auto;
      display: inline;
  }
  </code></pre>
  
  <p><br>
  The working <a href="http://jsfiddle.net/9XG5w/" rel="nofollow">JSFiddle</a></p>