我們經常需要在網頁設計中對圖片進行排版，而讓圖片充滿一個框的CSS技巧就是其中之一。

.img-box {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
overflow: hidden;
}
.img-box img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}

上面是樣式代碼，當然也可以根據自己的需求進行更改。其中，我們將圖片設置為整個框的背景，并調整了圖片的填充方式，讓圖片在框內居中并自適應大小。

在HTML中，我們只需要把圖片放到div容器中然后套用上述樣式即可：

<div class="img-box">
<img src="your-image-url" alt="your-image">
</div>

如果您想使用背景圖像而不是<img>標簽，只需在CSS中更改樣式：

.img-box {
height: 300px;
width: 300px;
background-image: url('your-image-url');
background-size: cover;
background-position: center;
}

同樣地，在HTML中套用此樣式：

<div class="img-box"></div>

這樣，您的圖片便完美地充滿了一個框！