CSS背景圖在網(wǎng)頁制作中有廣泛應(yīng)用，然而在使用過程中，經(jīng)常遇到一個問題，就是如何讓背景圖適應(yīng)容器大小。下面我們來探討一下該問題的解決方案。

在CSS中，我們可以使用background-size屬性來設(shè)置背景圖的大小。默認(rèn)情況下，該屬性的值為auto，也就是背景圖的大小和容器的大小相同。當(dāng)我們想要背景圖隨著容器的大小進(jìn)行縮放時，可以使用背景圖的百分比值來設(shè)置background-size屬性。例如：

div{
background-image: url(../images/bg.jpg);
background-size: 100% 100%;
}

上述代碼中，我們設(shè)置了背景圖的寬度和高度都為容器的100%，這樣背景圖就隨著容器的大小進(jìn)行縮放了。但是這種方法會導(dǎo)致背景圖失真，尤其是當(dāng)容器寬高比和背景圖寬高比不一致時，就會出現(xiàn)拉伸或壓縮的情況。

為了避免這種情況的發(fā)生，我們可以使用background-size屬性的cover和contain值。

• cover：該值會將背景圖縮放至完全覆蓋容器，并保持背景圖的寬高比，這樣背景圖就不會失真了。但是如果容器寬高比和背景圖寬高比不一致時，背景圖可能會超出容器的范圍。
• contain：該值會將背景圖縮放至完全包含容器，并保持背景圖的寬高比，這樣背景圖也不會失真了。但是如果容器寬高比和背景圖寬高比不一致時，容器的背景色可能會顯示出來。

示例代碼如下：

div{
background-image: url(../images/bg.jpg);
background-size: cover; /* 或 contain */
background-position: center center; /* 讓背景圖居中 */
background-repeat: no-repeat; /* 不重復(fù) */
}

通過以上方法，我們可以讓背景圖適應(yīng)不同大小的容器，同時又不會失真或拉伸，達(dá)到了較好的效果。