如何通过 CSS 让背景图像/图像拉伸以填充容器？答案

【问题标题】：How to get background image/ image to stretch to fill container via CSS?如何通过 CSS 让背景图像/图像拉伸以填充容器？
【发布时间】：2012-09-18 02:09:24
【问题描述】：

我有一个比例矢量图像，我希望它填充一个容器。 SO上有几个这样的问题，尽管它们有点老了。例如。 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 标签？（P.S. 我知道 IE8 绝对无法处理 svgs）

【问题讨论】：

标签： html css svg background-image

【解决方案1】：

你试过了吗

background-size:cover;

检查一些examples。

我在使用 webkit、background-size:cover 和 SVG 背景图像时遇到了问题。我解决了它添加

-webkit-background-origin:border;

【讨论】：

谢谢。 cover 成功覆盖了容器。然而，奇怪的是，图像过于“放大”，以至于只有图像的上半部分可见。 o.O 因为我已经修复了图像，所以无法看到图像的其余部分......
你不再需要background-attachment:fixed;，因为它会覆盖整个高度！
这让我有点莫名其妙 - 但是当不再固定时，背景图像似乎完全消失了！ :p

【解决方案2】：

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

如果不想修改图片文件可以试试

背景图片: url('background_image.svg#svgView(preserveAspectRatio(none))');

Firefox 15 将支持这一点，可能还会支持其他 UA。

【讨论】：

不错，很有用。如果可能的话，我如何将它与基于 base64 编码的内联 SVG 一起使用？
我在转换为 base64 之前将属性添加到了我的 SVG 中，它就像一个魅力。谢谢@RobertLongson！
非常感谢。你和 preserveAspectRatio="none" 拯救了我的一天。 :)
爱你。爱你，爱你，爱你，爱你，爱你，爱你，爱你，爱你……