在網頁設計過程中，經常需要在頁面中加入圖片。但是，由于不同的圖片大小和頁面布局的不同，有時候圖片的尺寸會影響到整體頁面的美觀度。這時，我們可以使用CSS的圖片自動拉伸填充功能，方便地解決這個問題。

CSS的圖片自動拉伸填充功能可以通過background-size屬性來實現。該屬性可以設置圖片的尺寸適應父元素的大小，用于讓圖片自動拉伸和填充到容器中。

/* 設置背景圖片自動拉伸填充 */
.container {
background-image: url("example.jpg");
background-size: cover;
}

上面的代碼中，我們首先將一個名為.container的元素設置為背景圖片，并且將該元素設置為顯示區域的大小。接著，我們使用background-size屬性將圖片自動拉伸和填充到容器中。cover值可以讓整個圖片覆蓋容器，同時保持原始圖片的比例，無需裁剪圖片以適應大小。

還有一個非常有用的值是contain，它能夠將整張圖片縮放到適應容器的尺寸，保持原始尺寸不變。這個方法也非常有用，因為它可以讓你在不失真或拉伸的情況下將一張較小的圖片放在一個大容器內。

/* 設置背景圖片自適應，保持比例 */
.container {
background-image: url("example.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

上面的代碼中，我們使用contain值將圖片自適應到容器大小，但是會保持原始圖片的比例。我們還可以使用background-position屬性將圖片放置在容器中央，這樣可以讓整個圖片居中顯示。

總的來說，CSS的圖片自動拉伸填充功能非常方便實用，可以在很多網頁設計的場景中使用。你可以根據實際的需要來選擇background-size屬性的值，使得圖片能夠很好地適應容器，同時保持原始比例。同時，這種方法也適用于移動設備，可以讓圖片和整個頁面在任意大小的設備上看起來很棒。