事情的起因是这样的 ——
听闻svg是矢量图标,可以无损拉伸大小。
于是我给标签设了一个svg格式的背景图片,并期待效果和这个图片是一样的:
然后敲出了如下代码
然而效果和我想象的并不一样:
于是我研究了一下,
发现给span
标签设置的尺寸是20px * 20px
, 而svg图片的原始尺寸是10px * 10px
所以,应该是svg图片没有自适应标签大小,默认通过拷贝自身的方式,填充了标签中空白的空间。
然后我就打开了万能的MDN查了一下,
果然可以设置一个属性达到我想要的效果:background-repeat: no-repeat;
使背景图片不自动重复填充
于是我把代码改成了这样:
然而效果和我想象的还是不太一样:
图片是不重复了,但是大小还是10px * 10px
,并没有拉伸
于是我又查了一下是不是有设置背景尺寸的属性。。果然。。
background-size: contain;
这个属性可以使图片在保持原有比例的同时,缩放到标签元素可用空间中最大的尺寸。
于是
效果:
搞定
所以 ——
既然background-size: contain;
可以使图片大小自适应,
那么background-repeat: no-repeat;
这条属性是不是可以删掉了?
于是我尝试了一下:
效果变成了这样:
在这种情况下,span
标签的大小是30px * 20px
,图片原始大小是10px * 10px
,
如果要完全填充,并不能保证原图片的比例,
所以!如果标签的大小和图片的原始大小,不是同比例的,还是需要加上background-repeat: no-repeat;
这条属性的!
为了以防以后改动这个图片的原始大小或者标签的尺寸,我又默默地加上了