html - Chrome - 在不保持比例的情况下拉伸(stretch)背景图像

Question

我有以下代码:

.container {
  width: 1rem;
  height: 2rem;
  background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
  background-size: 100% 100%;
  border: 1px solid black;
}

<div class="container"></div>

我希望 div 的背景图像被拉伸(stretch)到所述 div 的完整 width 和 height >.

Firefox 的行为符合预期:

但是 Chrome 似乎有一个错误，它会以不同的方式解释 background-size:

您可以在 this fiddle 中看到实时结果

重新创建背景图像不是解决方案，因为有问题的 div 是可变的 height。

这个 Chrome 错误是否有解决方法？

Answer 1

也许有人会找到这篇文章，但找不到正确的答案。 我发现在我的例子中，我必须向我的 svg 文件添加一个属性:

<svg preserveAspectRatio="none" ...