我认为这是一个CSS问题,但我不确定。我有一个网站,在其移动版本中,我正在使用CSS将具有SVG背景的div的宽度设置为100%。在Chrome中,SVG会自适应缩放,如下图所示:
然而,当我转到Firefox时,在相同的屏幕宽度为767(媒体查询为
编辑:这是我的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是因为我不想担心这些问题。猜错了,谢谢!
![](https://istack.dev59.com/tyExa.webp)
max-width: 768px
)时,SVG最终被拉伸,如下图所示:
![](https://istack.dev59.com/EbjMa.webp)
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是因为我不想担心这些问题。猜错了,谢谢!
background-size: contain
并删除<svg>上的任何宽度和高度属性以及viewBox
(不要删除viewBox
,只需确保其没有宽度和高度)。 - zer00ne