拉伸SVG背景而不保持纵横比

Question

我希望使用svg图像作为背景图片，我想展示完整的图像（不裁剪），并将图像拉伸到容器div的100%高度和宽度，而不保持原始纵横比。

我希望这样做可以实现：

background-size: 100% 100%;

但是它不起作用，高度为100％，但宽度不是，它保持原始纵横比。

如果我使用png图像而不是svg，则可以正常工作。

是否有一种方法可以使用svg实现？

- Dan Bolofe

---

取决于实际的SVG代码中preserveAspectRatio的设置。你有SVG代码吗？ - undefined

谢谢！我对SVG一无所知，但现在我知道了一些，添加preserveAspectRatio="none"就是解决办法。 - undefined

Answer 1

解决方案：

在文本编辑器中打开svg文件并添加以下属性：

<svg preserveAspectRatio="none"

- Dan Bolofe

Answer 2

.sample {
   height:500px;
   width:500px;
   background-image: url('sample.svg');
   background-size:cover;
   background-position:center center;
}


<div class="sample"></div>

试一试吧。希望这能帮到你。

- jonathan david sarmiento

---

如果屏幕尺寸小于500像素或大于500像素怎么办？ - undefined

谢谢，但是background-size:cover属性会裁剪图像以保持原始比例。 - undefined

@niyasc 这只是一个示例 - undefined

Answer 3

使用

height:100% ;width:100%; background-size:contain; 

保持背景的纵横比。

- Swaranan Singha Barman

---

可能可以使用png，但是我刚试过svg，它无法拉伸到100%的宽度，因为它保持了纵横比，可能有一种针对svg的特殊技巧。 - undefined

实际上..我刚刚看到你写的是"保持纵横比例"，但我想要不保持纵横比例。 - undefined