为什么在Firefox中SVG会拉伸，而在Chrome中不会

Question

我认为这是一个CSS问题，但我不确定。我有一个网站，在其移动版本中，我正在使用CSS将具有SVG背景的div的宽度设置为100%。在Chrome中，SVG会自适应缩放，如下图所示： 然而，当我转到Firefox时，在相同的屏幕宽度为767（媒体查询为max-width: 768px）时，SVG最终被拉伸，如下图所示： 编辑：这是我的CSS：

width: 100% !important; height: 50% !important; float: left; border: none !important; background: url('../assets/images/nra-image.svg') no-repeat; background-size: 100% 100%;

这是否是Firefox本身的问题，还是可以在CSS中修复而不更改100%的div宽度？当然，我之所以使用SVG而不是PNG / JPG是因为我不想担心这些问题。猜错了，谢谢！

- Martavis P.

---

请分享您的代码，这样我们就可以看到应用了哪些属性。 - TylerH

你应该在问题中包含<svg>根元素，它上面的属性可能会影响结果。 - Erik Dahlström

@ZachSaucier 感谢您的建议，但使用 cover 并不起作用。它可以让 SVG 看起来更好，但在调整窗口大小时无法缩放。 - Martavis P.

@MartavisP。我们需要查看<svg>，可能有成千上万的属性是罪魁祸首。此外，这是内联、对象、嵌入、iframe还是背景？算了，我发现是背景。 - zer00ne

@MartavisP。background-size: contain并删除<svg>上的任何宽度和高度属性以及viewBox（不要删除viewBox，只需确保其没有宽度和高度）。 - zer00ne

Answer 1

我认为这与SVG内部的代码有关。确保您使用viewBox属性，并将preserveAspectRatio="meet"添加到其中。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" preserveAspectRatio="meet">
    <!-- SVG CONTENT HERE -->
</svg>

- Todd Padwick