Chrome - 无需保持比率即可拉伸背景图像

Question

我有以下代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望将div的背景图片拉伸到所述width的完整height和div。

Firefox的行为符合预期：

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

您可以在this fiddle

中查看实时结果

重新创建背景图片不是一个解决方案，因为所讨论的div是变量height。

是否有解决此Chrome错误的方法？

Answer 1

也许有人会找到这篇文章但找不到合适的答案。 我发现在我的情况下，我必须在我的svg文件中添加一个属性：

waf

Answer 2

好吧，也许不是最好的解决方案，但至少它在Chrome中适用于我。 但是你必须根据你的浏览器加载，用JQuery设置内部div的高度（transform-scale）。不是很好，但它的工作原理。 还要注意-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/

Answer 3

尝试使用此css代码，它肯定会解析您的查询。

.container{

    background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
    background-size: 100% 100%;
    border:1px solid black;
    float: left;
background-repeat: no-repeat;
    width: 5%;
height: 30px;
}