在設(shè)計(jì)網(wǎng)頁時(shí)，我們經(jīng)常需要在頁面中插入圖片，而有時(shí)我們希望將圖片填滿一個(gè)盒子，這時(shí)候可以使用CSS實(shí)現(xiàn)。接下來讓我們看一下如何使用CSS圖片填充完盒子。

首先，在HTML中創(chuàng)建一個(gè)包含圖片的盒子。以下是一個(gè)例子：

<div class="box">
<img src="image.jpg" alt="example" />
</div>

盒子的CSS樣式如下：

.box {
width: 300px;
height: 300px;
background-color: grey;
}

這里我們?cè)O(shè)置了盒子的寬度、高度和背景顏色。

現(xiàn)在，我們來看如何使用CSS填充圖片。為了實(shí)現(xiàn)這一目標(biāo)，我們可以使用object-fit屬性。這個(gè)屬性可以讓圖片在保持其寬高比的同時(shí)填滿其容器。我們可以使用以下代碼：

.box img {
width: 100%;
height: 100%;
object-fit: cover;
}

代碼中，我們首先將圖片的寬度和高度設(shè)置為100%，這是為了確保圖片占據(jù)整個(gè)盒子。接著，我們使用object-fit屬性將圖片填充盒子。在這個(gè)例子中，我們使用了cover選項(xiàng)，這個(gè)選項(xiàng)會(huì)將圖片拉伸，以填滿整個(gè)盒子，同時(shí)保持其寬高比。

以上就是使用CSS圖片填充完盒子的方法。通過上述步驟，我們可以將圖片填滿盒子，并按我們的需要調(diào)整大小和布局。