调整视图宽度，使用 CSS 保持图像纵横比答案

【问题标题】：resize view width, preserve image aspect ratio with CSS调整视图宽度，使用 CSS 保持图像纵横比
【发布时间】：2012-05-20 12:06:44
【问题描述】：

我注意到当您在 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%;    
}

【问题讨论】：

标签： html css responsive-design aspect-ratio

【解决方案1】：

如果我对您的理解正确，只需将img 上的高度一并删除即可。

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

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

【讨论】：

移除哪个元素的高度？你的小提琴和我的一样。
复制了错误的网址，从图片中删除高度。小提琴链接已更新。
-@JamesMontagne，谢谢，为了完整性，您能否指出答案中的 CSS 更改？
这个解决方案很好，除非图片的纵横比比屏幕高。在这种情况下，图片的下部将不可见。而 max-height 会限制高度，但会弄乱纵横比。

【解决方案2】：

有时浏览器会缩放高度...我遇到了这个问题，所以我要做的就是解决这个问题：

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

【讨论】：