相关疑难解决方法(0)

我使用svg图像作为背景.我正在尝试使用CSS3,background-size: 100% 100%;但它似乎不起作用,即使在应该支持它的浏览器中(如Chrome).

如果你看这个网站,你会看到#special-post article(在食物图像的右下方)有一个红色的横幅背景.请注意,当您向下缩小窗口时,背景图像的高度会下降以保留其比例,而不是按照我的意愿拉伸.

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

编辑:我在Safari上检查了它,它的工作原理!所以看起来我的问题是针对Chrome的.

(PS:我熟悉这种替代解决方案,使用img标签,但我宁愿不使用它.)

我有以下代码：

.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能充分发挥width和height的作用div。

Firefox的行为符合预期：

但是Chrome似乎有一个错误，使其有background-size不同的解释：

您可以在此小提琴中看到实时结果

重新创建背景图像将不是解决方案，因为div存在问题height。

这个Chrome错误有解决方法吗？