CSS拉伸填充是一種讓網(wǎng)頁(yè)元素自適應(yīng)父元素尺寸的技術(shù)，可以輕松解決網(wǎng)頁(yè)響應(yīng)式設(shè)計(jì)中的難題。

.box {
width: 100%;
height: 100%;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}

以上代碼中，我們將一個(gè)元素寬度和高度都設(shè)置為100%，這樣就可以自適應(yīng)父元素尺寸。接著我們添加了一張背景圖像，并將其大小設(shè)置為cover，使它填滿整個(gè)元素。

這樣做的效果是，當(dāng)我們的父元素尺寸改變時(shí)，該元素也會(huì)隨之縮放，背景圖像也會(huì)自動(dòng)縮放并填滿整個(gè)元素。這非常適合用于制作響應(yīng)式網(wǎng)頁(yè)，因?yàn)槲覀儾槐負(fù)?dān)心元素或圖像會(huì)被截?cái)嗷蚴д妗?/p>

.img {
width: 100%;
height: auto;
max-width: 100%;
}

在這個(gè)例子中，我們將img元素的寬度設(shè)置為100%，高度設(shè)置為auto，意味著圖片的高度將自動(dòng)根據(jù)寬度進(jìn)行縮放。我們還添加了max-width屬性，使圖片在寬度超過(guò)父元素時(shí)不會(huì)超出邊界。

這些技術(shù)都是基于CSS的盒模型和尺寸計(jì)算機(jī)制實(shí)現(xiàn)的。熟練掌握它們可以讓你輕松創(chuàng)建自適應(yīng)的網(wǎng)頁(yè)元素，并且保證元素在不同設(shè)備和分辨率下都能正常顯示。