在制作網(wǎng)頁(yè)布局的時(shí)候，通常會(huì)使用一些圖片作為背景或者來(lái)襯托頁(yè)面的內(nèi)容。不過(guò)，有時(shí)候這些圖片可能會(huì)不能完全填充父元素，導(dǎo)致頁(yè)面顯示效果不佳。這時(shí)候，我們可以使用 CSS 來(lái)實(shí)現(xiàn)圖片的填充功能，在這里我介紹一下兩種常用的方法。 第一種方法是使用 background-size 屬性。background-size 屬性可以控制背景圖片的大小，讓其自適應(yīng)父元素的大小?？梢允褂靡韵麓a實(shí)現(xiàn)：

.parent {
background-image: url('image.jpg');
background-size: cover;
}

這樣，父元素就會(huì)自適應(yīng)背景圖片的大小，使其完全填充整個(gè)父元素。 第二種方法是使用 object-fit 屬性。這個(gè)屬性可以控制元素內(nèi)部的圖片的縮放方式，讓其填充滿整個(gè)元素?？梢允褂靡韵麓a實(shí)現(xiàn)：

.parent {
position: relative;
}
.parent img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}

上面的代碼中，我們將父元素設(shè)置為相對(duì)定位，并使用絕對(duì)定位將圖片填充到整個(gè)父元素內(nèi)部。object-fit 屬性的值設(shè)置為 cover，表示將圖片縮放并裁剪以填充元素的尺寸。 以上就是兩種常用的 CSS 圖片填充方法，分別是使用 background-size 和 object-fit 屬性。使用這些方法可以讓圖片完全填充父元素，讓網(wǎng)頁(yè)顯示效果更加美觀。