调整视图的宽度，保持与CSS图像宽高比(resize view width, preserve im

我从注意到如何，当你调整对Google+上的“收藏夹”编辑图片的浏览器图像缩放兴趣在此： https://plus.google.com/ 。

下面是一个的jsfiddle其中当调整浏览器的宽度，仅调整大小的图像的宽度和高宽比丢失： http://jsfiddle.net/trpeters1/mFPTq/1/

有人可以帮我找出的CSS会是什么样子到该图像的保存宽高比？

如果你不希望查看的jsfiddle，这里的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>​

这里的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:

如果我正确理解你，只要在删除高度img都在一起。

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

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

Answer 2:

有时，浏览器将标高......我有这个问题，所以我所做的修复是这样的：

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

文章来源: resize view width, preserve image aspect ratio with CSS