相关疑难解决方法(0)

如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽度:高度比？

示例:stackoverflow.com - 当图像插入编辑器面板并且图像太大而无法放入页面时,图像会自动调整大小.

我对此感兴趣,因为当您在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%;    
}?