在窗口大小调整时缩放SVG背景图像div

Question

寻找一些帮助。 我试图按比例缩放一个图像（.essentials），这是在css中设置为背景并应用于div。

当窗口缩小时，图像的大小会相应地调整大小，但问题在于div的高度保持不变会留下巨大的空隙。

我正在使用modernizr for fallback来检测是否支持svg来获取svg图像，如果没有获得用于IE8及更低版本的png图像。

HTML下面

<div class="essentials"></div> 

CSS下面

.essentials{ 
    margin-bottom: 5em; 
    height: 505px; 
} 
.svg .essentials{ 
    background: url("../images/myEssentials.svg") no-repeat; 
    background-size: contain; 
} 
.no-svg .essentials{ 
    background: url("../images/myEssentials.png") no-repeat; 
} 

Answer 1

假设div有没有内容，使用例如

padding-bottom: 50%; // 2:1 aspect ratio 

要添加支持IE6和IE5，包括

height: 0; // IE6 (hasLayout) 

（如果div有内容，你需要一个额外的包装股利。这是所有从http://alistapart.com/article/creating-intrinsic-ratios-for-video拍摄）。