resize view width, preserve image aspect ratio wit

Question

I got interested in this from noticing how images are scaled when you resize the browser on "lightbox"ed images on Google+: https://plus.google.com/.

below is a jsfiddle which when you resize the browser width, only resizes the image width and aspect ratio is lost: http://jsfiddle.net/trpeters1/mFPTq/1/

Can someone help me figure out what the CSS would look like to the preserve aspect ratio of this image?

If you don't want to view the jsfiddle, here's the HTML:

<div id="imgWrapper" >
  <div id="titleContainer">title container
  </div>
  <div id="imgContainer"  >    
        <img id="mainImg" src="https://lh4.googleusercontent.com/-f8HrfLSF2v4/T609OOWkQvI/AAAAAAAAGjA/waTIdP4VkMI/s371/impact_of_early_exposure_to_D%26D.jpg">    
  </div>
</div>​

here's the CSS:

 #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%;    
}​

Answer 1

If I'm understanding you correctly, simply remove the height on the img all together.

http://jsfiddle.net/mFPTq/2/

#mainImg{
    width:100%;
    /* NO HEIGHT height:61.8%; */
}​

Answer 2

Sometimes the browser will scale height... I had this issue, so all I did to fix was this:

 <style> 
 img{ max-width:100%; height:auto; }
 </style>