CSS: background-size

background-size顧名思義，可以調整圖片的大小，除了可以用數字來調整外，還包含以下幾個值:

contain

1
2
3

.box{
	background-size: contain;
}

讓圖片盡可能填滿整個元素，並且用不裁切或擠壓到的方式，如果填不滿就會用repeat的方式填滿(除非你把repeat設為no-repeat，關於repeat可以看這篇)

1
2
3

.box{
	background-size: cover;
}

把圖片盡量縮小成可以完全塞進去元素的大小，如果圖片會超出去元素，多的部分就會被裁掉。

1
2
3

.box{
	background-size: auto;
}

在不改變圖片的任何屬性的情況下用圖片填滿背景。

除了以上三個屬性，還可以使用px、%、em等等單位，之後再配合background-position來調整位置，比較常見的作法是使用cover搭配background-posiiotn: center，如此就可以把圖片居中，並顯示出正中間的圖案。