HTML5/SVG:PreserveSpectratio“；无”；不在Firefox中工作

我想使用SVG图像作为背景图像html div元素。SVG应该根据其嵌入的div进行拉伸。这在Google Chrome中运行得很好，但在Firefox中，SVG在调整大小时会保持其宽度/高度比，不会拉伸。我正在使用

preserverAspectRatio=“none”

SVG如下所示：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1" preserveAspectRatio="none" viewBox="0 0 180 95">
<g
 id="layer1">
<path
   d="m 1.0714286,31.469326 140.0000014,0 0,-30.0000009 30,40.0000009 -30,40 0,-30 -140.0000014,0 z"
   id="path3015"
   style="fill:#4f81bd; fill-opacity:1; stroke:#385d8a; stroke-width:3; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1" />
</g>
</svg>

<div style="
      width: 250px; 
      height: 200px; 
      background-image:url(file.svg); 
      background-repeat:no-repeat;">
          test
 </div>

HTML如下所示：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1" preserveAspectRatio="none" viewBox="0 0 180 95">
<g
 id="layer1">
<path
   d="m 1.0714286,31.469326 140.0000014,0 0,-30.0000009 30,40.0000009 -30,40 0,-30 -140.0000014,0 z"
   id="path3015"
   style="fill:#4f81bd; fill-opacity:1; stroke:#385d8a; stroke-width:3; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1" />
</g>
</svg>

<div style="
      width: 250px; 
      height: 200px; 
      background-image:url(file.svg); 
      background-repeat:no-repeat;">
          test
 </div>

测试

---

在Chrome中，我可以更改div元素的宽度/高度，SVG图像将被拉伸，而无需考虑原始的宽度/高度比。这种行为是故意的。在Firefox中，它只是调整大小并保持其原始比例。你知道我怎样才能改变这一切吗？谢谢

尝试添加

背景大小：100%100%

到您的“风格”

div

（它适合我）。

非常感谢。我花了很长时间才找到这个。它还修复了我在IE9上遇到的一个奇怪的大小错误；但背景大小：100%100%；修正了FF，谢谢。请将此标记为正确答案。这对我也有用！非常感谢你！这节省了时间，现在我的网站可以在firefox和其他浏览器上运行。谢谢