当前位置: 首页 > 知识库问答 >
问题:

前端 - 为什么这个background-size 100 100 不生效?

冯野
2023-08-15

这个背景图应该顶到最左边去才对,为什么没有过去?图片格式是svg,我在想是不是svg的原因?有无大佬讲解一下原理。
image.png
图片本身左边没有空隙,所以不是图片内容的问题。
image.png

共有1个答案

叶阳
2023-08-15

有没有可能,这个背景图的左半部分就是有空白内容的?


Edit

如果背景图是 svg 格式的,得看 svg 图片是怎么设计的,在部分场景下下使用 background-size: 100% 100% 属是不会拉伸的,会继续保持原本的宽高比例。

具体可以阅读MDN上的这篇文章 �� SVG 背景缩放 - CSS:层叠样式表 | MDN

解决方案是给 svg 图片增加 preserveAspectRatio="none" 属性。
或者在引入时这样处理 background-image: url('xxxx.svg#svgView(preserveAspectRatio(none))')

相关阅读

  • svg背景图无法自适应-掘金
  • html - how to add preserveAspectRatio to svg used as background-image - Stack Overflow
  • 理解SVG viewport,viewBox,preserveAspectRatio缩放 « 张鑫旭-鑫空间-鑫生活
  • viewBox - SVG:可缩放矢量图形 | MDN
  • preserveAspectRatio - SVG:可缩放矢量图形 | MDN
 类似资料: