我相信这是一个 CSS 问题，但我不确定。我有一个网站，在其移动版本中，我在 CSS 中将具有 svg 背景的 div 的宽度设置为 100%。在 Chrome 中，svg 缩放得非常漂亮，如您在该屏幕截图中所见:
但是，当我转到 Firefox 时，在 767 的相同屏幕宽度下(媒体查询是 max-width: 768px)，svg 最终被拉伸(stretch)，就像这个屏幕截图中一样:
编辑:这是我的 CSS:
宽度:100%!重要；
高度:50%!重要；
向左飘浮;
边框:无!重要；
背景:url('../assets/images/nra-image.svg') 不重复；
背景大小:100% 100%；
这是 Firefox 本身的问题还是可以在不更改 100% div 宽度的情况下在 CSS 中修复？当然，问是因为在 png/jpg 上使用 svg 的目的是让我不必担心这些类型的问题。我猜我错了耸耸肩。
谢谢大家!
最佳答案
我认为这与 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>
关于html - 为什么 svg 在 Firefox 中延伸而不是 Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23502566/