Question

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

当窗口变小时，图像会按比例调整大小，但问题是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;
}

Answer 1

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

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

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

height: 0; // IE6 (hasLayout)

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

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

1 个答案: