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

事情的起因是这样的 ——

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

于是我给<span>标签设了一个svg格式的背景图片，并期待效果和这个图片是一样的：

image.png

然后敲出了如下代码

<style>
    .demo {
        float: left;
        width: 20px;
        height: 20px;
        background-image: url(../../assets/release_icon.svg);
    }
</style>

<span class="demo">
</span>

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

---

于是我研究了一下,

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

image.png

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

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

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

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

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

<style>
    .demo {
        float: left;
        width: 20px;
        height: 20px;
        background-image: url(../../assets/release_icon.svg);
        background-repeat: no-repeat; 
    }
</style>

<span class="demo">
</span>

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

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

---

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

background-size: contain;

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

于是👇

<style>
    .demo {
        float: left;
        width: 20px;
        height: 20px;
        background-image: url(../../assets/release_icon.svg);
        background-repeat: no-repeat;
        background-size: contain;
    }
</style>
<div>
    <span class="demo">
    </span>
</div>

效果： image.png

搞定👌

---

所以 ——

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

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

于是我尝试了一下：

<style>
    .demo {
        float: left;
        width: 30px;
        height: 20px;
        background-image: url(../../assets/release_icon.svg);
        background-size: contain;
    }
</style>
<div>
    <span class="demo">
    </span>
</div>

效果变成了这样： image.png

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

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

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

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

---