当您在 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%;
}