title: resize view width, preserve image aspect ratio with CSS
body: <p>I got interested in this from noticing how images are scaled when you resize the browser on "lightbox"ed images on Google+: <a href="https://plus.google.com/" rel="nofollow">https://plus.google.com/</a>.</p>
  
  <p>below is a jsfiddle which when you resize the browser width, only resizes the image width and aspect ratio is lost:
  <a href="http://jsfiddle.net/trpeters1/mFPTq/1/" rel="nofollow">http://jsfiddle.net/trpeters1/mFPTq/1/</a></p>
  
  <p>Can someone help me figure out what the CSS would look like to the preserve aspect ratio of this image?</p>
  
  <p>If you don't want to view the jsfiddle, here's the HTML:</p>
  
  <pre><code>&lt;div id="imgWrapper" &gt;
    &lt;div id="titleContainer"&gt;title container
    &lt;/div&gt;
    &lt;div id="imgContainer"  &gt;    
          &lt;img id="mainImg" src="https://lh4.googleusercontent.com/-f8HrfLSF2v4/T609OOWkQvI/AAAAAAAAGjA/waTIdP4VkMI/s371/impact_of_early_exposure_to_D%26D.jpg"&gt;    
    &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>here's the CSS:</p>
  
  <pre><code> #imgWrapper{
    background:gray;
    width:80%;
    height:80%;
    border-radius:5px;
    border:1px solid gray;
   }
   #imgContainer{
     width:100%;
     height:100%;    
   }
  #titleContainer{
    background:yellow;
    border-radius:5px;
    border:1px solid gray;
  }
  #mainImg{
    width:100%;
    height:61.8%;    
  }​
  </code></pre>