4

我想使用 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>

HTML 看起来像这样：

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

在 Chrome 中，我可以更改 div 元素的宽度/高度，并且 SVG 图像在不考虑原始宽度/高度比的情况下被拉伸。这种行为是有意的。在 Firefox 中，它只是调整大小并保持其原始比例。你知道我怎么能改变这个吗？谢谢

4

1 回答 1

16

尝试添加background-size: 100% 100%;到您的“风格” div（它适用于我）。

于 2012-05-18T06:31:29.143 回答