Question

我对此感兴趣，并注意到当您在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>

调整视图宽度，使用CSS保留图像宽高比

2 个答案: