为什么svg在Firefox中延伸但不在Chrome中延伸

Question

我相信这是一个CSS问题，但我不确定。我有一个网站，在其移动版本中，我在CSS中使用svg背景100％制作div的宽度。在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的问题所以我不必担心这些类型的问题。猜猜我错了耸肩。

谢谢你们！

Answer 1

我认为这与SVG本身的代码有关。 确保使用viewBox属性，并添加preserveAspectRatio =＆＃34; meet＆＃34;它。

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