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

【问题标题】：Scale SVG Background Image on div when window resizes调整窗口大小时在 div 上缩放 SVG 背景图像
【发布时间】：2013-06-30 00:56:31
【问题描述】：

寻求帮助。我正在尝试按比例缩放在 css 中设置为背景并应用于 div 的图像（.essentials）。

当窗口变小时，图像会按比例调整大小，但问题是 div 的高度保持不变，留下了巨大的差距。

我正在使用modernizr作为后备来检测是否支持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;
}

【问题讨论】：

标签： html css svg

【解决方案1】：

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

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

要添加对 IE6 和 IE5 的支持，请包含

height: 0; // IE6 (hasLayout)

（如果 div 有内容，则需要额外的 wrapper div。这一切都取自http://alistapart.com/article/creating-intrinsic-ratios-for-video）。

【讨论】：