拉伸背景图片很容易:
.stretched-logo-bg {
background: url("../img/curve.png") center center no-repeat;
background-size: 100% 100%;
}
这不适用于SVG背景但
.stretched-logo-bg {
background: url("../img/curve.svg") center center no-repeat;
background-size: 100% 100%;
}
它不会被拉伸,它将保持其纵横比并且只是居中。
至少在Chrome 52中
答案 0 :(得分:5)
如果你需要覆盖你正在显示的SVG的preserveAspectRatio,你可以使用SVG fragment identifier来做到这一点。
.stretched-logo-bg {
background: url("../img/curve.svg#svgView(preserveAspectRatio(none))") center center no-repeat;
background-size: 100% 100%;
}
答案 1 :(得分:3)
我不相信你可以像使用PNG那样使SVG扭曲。
但是,如果您主要支持现代浏览器,则可以将preserveAspectRatio="none"
属性添加到SVG标记。
例如:
<svg version="1.1" preserveAspectRatio="none" .. etc`