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