如何通过CSS获取背景图像/使图像拉伸以填充容器？

Question

我有一个比例向量图像，想将其填充到容器中。Stack Overflow 上有一些这样的问题，尽管它们有点旧了，例如：Stretch and scale CSS background

然而，当我尝试实现这些解决方案时，结果令人失望。

例如：

    body  {

    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000;
    background-color: #000
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;

}

...

.twoColLiqLtHdr #container {
    width: 80%;
    margin: 0 auto; 
    border: 2px solid #000000;
    text-align: left; 
    background-color: #003;
    background-image: url('background_image.svg'); 
    /*background-position: 80% 80%; */

  background-repeat: no-repeat; 
    color: #000;
    font-family: "Times", cursive;


    background-attachment:fixed;
    min-height:100%;
    /*top: 0;
    left: 0; */



} 

我尝试了各种排列方式，但无法使其拉伸而不留下空白区域（重复是某种程度上的成功，但看起来很糟糕）。

然而，由于我正在使用svg，我可能是以错误的方式处理它，我应该在html中使用svg xmlns标签吗？（附注：我知道IE8绝对无法处理SVG）

- user137263

Answer 1

你尝试过了吗

background-size:cover;

可以查阅一些示例。

我在使用webkit、background-size:cover和SVG背景图像时遇到了问题。我通过添加以下代码解决了这个问题：

-webkit-background-origin:border;

- Giona

---

感谢。封面成功地覆盖了容器。然而，奇怪的是，图像太“放大”了，只有图像的上半部分可见。由于我已经固定了图像，因此无法看到图像的其余部分... - user137263

你不再需要使用“background-attachment:fixed;”了，因为它会覆盖整个高度！ - Giona

有点让我困惑 - 但是当背景图不再固定时，它似乎完全消失了！ :p - user137263

Answer 2

你可能需要将preserveAspectRatio="none"作为属性添加到SVG图像本身的外部<svg>元素中。

如果您不想修改图像文件，则可以尝试

background-image: url('background_image.svg#svgView(preserveAspectRatio(none))');

Firefox 15支持该方法，其他浏览器也可能支持。

- Robert Longson

---

不错，非常有用。如果可能的话，我该如何在内联SVG上使用它并对其进行base64编码？ - Giona

在将SVG转换为base64之前，我添加了属性，它完美地工作了。谢谢@RobertLongson！ - shshaw

非常感谢。你和preserveAspectRatio="none"救了我的一天。 :) - Matěj Kříž

我爱你。 我爱你，我爱你，我爱你，我爱你，我爱你，我爱你，我爱你，我爱你... <3 - Anthony Bobenrieth