【CSS】背景图片自适应大小

事情的起因是这样的 ——

听闻svg是矢量图标,可以无损拉伸大小。

于是我给标签设了一个svg格式的背景图片,并期待效果和这个图片是一样的:

image.png

然后敲出了如下代码





然而效果和我想象的并不一样:
image.png

于是我研究了一下,

发现给span标签设置的尺寸是20px * 20px, 而svg图片的原始尺寸是10px * 10px

image.png

所以,应该是svg图片没有自适应标签大小,默认通过拷贝自身的方式,填充了标签中空白的空间

然后我就打开了万能的MDN查了一下,

果然可以设置一个属性达到我想要的效果:background-repeat: no-repeat;

使背景图片不自动重复填充

于是我把代码改成了这样:





然而效果和我想象的还是不太一样:
image.png

图片是不重复了,但是大小还是10px * 10px,并没有拉伸


于是我又查了一下是不是有设置背景尺寸的属性。。果然。。

background-size: contain;

这个属性可以使图片在保持原有比例的同时,缩放到标签元素可用空间中最大的尺寸

于是


效果:
image.png

搞定


所以 ——

既然background-size: contain;可以使图片大小自适应,

那么background-repeat: no-repeat;这条属性是不是可以删掉了?

于是我尝试了一下:


效果变成了这样:
image.png

在这种情况下,span标签的大小是30px * 20px,图片原始大小是10px * 10px

如果要完全填充,并不能保证原图片的比例

所以!如果标签的大小和图片的原始大小,不是同比例的,还是需要加上background-repeat: no-repeat;这条属性的!

为了以防以后改动这个图片的原始大小或者标签的尺寸,我又默默地加上了


你可能感兴趣的:(【CSS】背景图片自适应大小)