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

我有以下代码：

.container{
宽度：1em；
高度：2em；
背景图片：url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
背景大小：100%100%；
边框：1px纯黑；
}

---

好吧，也许不是最好的解决方案，但至少它在Chrome中对我来说很好。 但您必须根据加载时的浏览器，使用JQuery设置内部div的高度（变换比例）。不是很好，但很管用。 还要注意-webkit的背景大小

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

HTML:

---

在代码中尝试此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;
}

---

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

<svg preserveAspectRatio="none" ... 

---

可能重复检查@Brewal发布的内容或不使用SVG。顺便说一句，三角形可以使用纯css。还有一个重复：@Brewal我知道三角形css技巧，但在某些浏览器中它没有抗锯齿功能，看起来也不完美。如果有帮助，请告诉我。我只编辑了你代码的一部分。ok@KubaOrlik现在有什么问题。。请让我知道，它工作正常。我认为这应该是正确的答案。SVG的行为不同。请注意，如果未提供
viewBox
属性，则将忽略
preserveAspectRatio
。
.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;
}

<svg preserveAspectRatio="none" ...