事情的起因是這樣的 ——

聽聞svg是矢量圖標(biāo)，可以無損拉伸大小。

于是我給<span>標(biāo)簽設(shè)了一個(gè)svg格式的背景圖片，并期待效果和這個(gè)圖片是一樣的：

image.png

然后敲出了如下代碼

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

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

image.png

于是我研究了一下,

發(fā)現(xiàn)給span標(biāo)簽設(shè)置的尺寸是20px * 20px， 而svg圖片的原始尺寸是10px * 10px

image.png

所以，應(yīng)該是svg圖片沒有自適應(yīng)標(biāo)簽大小，默認(rèn)通過拷貝自身的方式，填充了標(biāo)簽中空白的空間。

然后我就打開了萬能的MDN查了一下，

果然可以設(shè)置一個(gè)屬性達(dá)到我想要的效果：background-repeat: no-repeat;

使背景圖片不自動(dòng)重復(fù)填充

于是我把代碼改成了這樣：

<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

圖片是不重復(fù)了，但是大小還是10px * 10px，并沒有拉伸??

于是我又查了一下是不是有設(shè)置背景尺寸的屬性。。果然。。

background-size: contain;

這個(gè)屬性可以使圖片在保持原有比例的同時(shí)，縮放到標(biāo)簽元素可用空間中最大的尺寸。

于是??

<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;可以使圖片大小自適應(yīng)，

那么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標(biāo)簽的大小是30px * 20px，圖片原始大小是10px * 10px，

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

所以！如果標(biāo)簽的大小和圖片的原始大小，不是同比例的，還是需要加上background-repeat: no-repeat;這條屬性的！

為了以防以后改動(dòng)這個(gè)圖片的原始大小或者標(biāo)簽的尺寸，我又默默地加上了??