背景尺寸：100% 100%；在 Chrome 中无法正常工作答案

【问题标题】：background-size:100% 100%; doesn't work properly in Chrome背景尺寸：100% 100%；在 Chrome 中无法正常工作
【发布时间】：2012-03-09 04:44:52
【问题描述】：

我使用 svg 图像作为背景。我正在尝试使用 CSS3 的 background-size: 100% 100%;，但它似乎不起作用，即使在应该支持它的浏览器（如 Chrome）中也是如此。

如果您查看this site，您会看到带有红色横幅背景的#special-post article（在食物图像的右侧/下方）。请注意，当您缩小窗口时，背景图像的高度会下降以保持其比例，而不是像我想要的那样拉伸。

编辑：我在 FireFox 上检查了这个，它工作正常......所以这似乎是一个 webkit 问题。

编辑：我在 Safari 上检查了这个，它可以工作！所以看起来我的问题是特定于 Chrome 的。

（PS：我熟悉this替代解决方案，使用img标签，但我宁愿不使用它。）

【问题讨论】：

【解决方案1】：

这在 Chrome 39 中仍然是一个问题，但在 Firefox 中不是。我在像这样缩放背景 SVG 时遇到了它：

background-image: url(bg.svg);
background-repeat: repeat-x;
background-size: 1200px auto;

即使在 SVG 中具有精确的像素水平尺寸，我也有一个小的差距。当我没有缩放它时它起作用了：

background-size: auto auto;

不能扩展背景的解决方案并不多，但仍然可以。

【讨论】：

【解决方案2】：

这里有一个解决方法：

打开您的.svg 文件，找到开头的<svg> 标签并在其中添加以下属性：

preserveAspectRatio="none"

【讨论】：

【解决方案3】：

事实证明，这是 Chrome 中一个特定于 svg 背景图像的已知错误。我正在运行 v 17.0.963.56，以防万一有人关心，您可以跟踪错误 here。

【讨论】：

【解决方案4】：

background-size: cover

全面运作。通过 Safari、Chrome 和 FF 测试。

【讨论】：