铬-拉伸背景图像而不保持比例

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

Firefox的行为符合预期：

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

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

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

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

Answer 1

也许有人会找到这篇文章，却找不到正确的答案。我发现就我而言，我必须在svg文件中添加一个属性：

<svg preserveAspectRatio="none" ... 

Answer 2

好吧，也许不是最好的解决方案，但至少它在 Chrome 中对我来说工作得很好。但是您必须根据您的浏览器加载情况，使用 JQuery 设置内部 div 的高度（变换比例）。不太好，但它确实有效。还要注意 -webkit-background-size。

正如你所看到的，问题很多。

HTML：

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

CSS：

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

http://jsfiddle.net/y0j5tejw/3/