Chrome - 如何拉伸背景图片而不保持比例

Question

I have the following code:

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

我希望

的背景图片可以被拉伸到整个

的和。火狐表现如预期：但Chrome似乎有一个解释的错误，见下图：您可以在此链接中查看实时结果。重新创建背景图片并不是一个解决方案，因为相关

的高度是可变的。有解决这个Chrome问题的方法吗？

- Kuba Orlik

---

可能是在Chrome浏览器中将SVG图像调整大小为背景的重复问题。 - Brewal

顺便提一下，一个三角形可以很容易地用纯CSS制作。 - Brewal

也是一个重复的问题：https://dev59.com/LGox5IYBdhLWcg3wOyD9 - Pikamander2

是的，结果证明这是一个重复的问题。我认为这个解决方案看起来最优雅。 - Kuba Orlik

据我所记，你可以将其旋转360°以在大多数情况下防止混叠。 - Brewal

Answer 1

也许有人会看到这篇文章，但找不到正确的答案。 我发现在我的情况下，我需要向我的svg文件添加一个属性：

<svg preserveAspectRatio="none" ... 

- Rory

---

我认为这应该是正确的答案。SVG的行为不同。请注意，如果未提供viewBox属性，则将忽略preserveAspectRatio。 - malthe

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/

- 0lli.rocks

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

- Jaffer Wilson

---

让我知道它是否对你有帮助。我只编辑了你代码的一部分。 - Jaffer Wilson

@KubaOrlik 现在有什么问题吗？请告诉我，它正在正常工作。。 - Jaffer Wilson