在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，經(jīng)常需要在頁(yè)面中加入圖片。但是，由于不同的圖片大小和頁(yè)面布局的不同，有時(shí)候圖片的尺寸會(huì)影響到整體頁(yè)面的美觀度。這時(shí)，我們可以使用CSS的圖片自動(dòng)拉伸填充功能，方便地解決這個(gè)問(wèn)題。

CSS的圖片自動(dòng)拉伸填充功能可以通過(guò)background-size屬性來(lái)實(shí)現(xiàn)。該屬性可以設(shè)置圖片的尺寸適應(yīng)父元素的大小，用于讓圖片自動(dòng)拉伸和填充到容器中。

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

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

還有一個(gè)非常有用的值是contain，它能夠?qū)⒄麖垐D片縮放到適應(yīng)容器的尺寸，保持原始尺寸不變。這個(gè)方法也非常有用，因?yàn)樗梢宰屇阍诓皇д婊蚶斓那闆r下將一張較小的圖片放在一個(gè)大容器內(nèi)。

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

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

總的來(lái)說(shuō)，CSS的圖片自動(dòng)拉伸填充功能非常方便實(shí)用，可以在很多網(wǎng)頁(yè)設(shè)計(jì)的場(chǎng)景中使用。你可以根據(jù)實(shí)際的需要來(lái)選擇background-size屬性的值，使得圖片能夠很好地適應(yīng)容器，同時(shí)保持原始比例。同時(shí)，這種方法也適用于移動(dòng)設(shè)備，可以讓圖片和整個(gè)頁(yè)面在任意大小的設(shè)備上看起來(lái)很棒。