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

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

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

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

為了避免這種情況的發生，我們可以使用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; /* 不重復 */
}

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