调整视图宽度，使用CSS保留图像宽高比 [英] resize view width, preserve image aspect ratio with CSS

问题描述

当您在Google+上调整浏览器上灯箱图片的尺寸时，我注意到图片的缩放比例，我对此感兴趣： https://plus.google.com/ 。

I got interested in this from noticing how images are scaled when you resize the browser on "lightbox"ed images on Google+: https://plus.google.com/.

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

below is a jsfiddle which when you resize the browser width, only resizes the image width and aspect ratio is lost: http://jsfiddle.net/trpeters1/mFPTq/1/

有人能帮我找出CSS看起来像这张图片的保留长宽比吗？

Can someone help me figure out what the CSS would look like to the preserve aspect ratio of this image?

如果你不想查看jsfiddle，这里是HTML：

If you don't want to view the jsfiddle, here's the 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%;    
}​

推荐答案

您可以正确地删除 img 上的高度。

If I'm understanding you correctly, simply remove the height on the img all together.

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

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

这篇关于调整视图宽度，使用CSS保留图像宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！