调整视图宽度，保持与CSS的图像宽高比

Question

我对此感兴趣，因为当您在Google+上的“Lightbox”ed图像上调整浏览器大小时，图像缩放比例如下：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>