CSS 是網(wǎng)頁設(shè)計(jì)中十分重要的一部分，對(duì)于圖片的操作也有很多方式。其中一種常見需求為讓整張圖片填充父容器，下面我們來具體說明一下。

假設(shè)有如下 HTML 代碼：

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

希望這張圖片可以填充父容器，即 div 元素，實(shí)現(xiàn)起來我們可以通過如下 CSS 代碼來實(shí)現(xiàn)：

div {
position: relative;
overflow: hidden;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}

首先，我們將 div 元素設(shè)置為相對(duì)定位，并設(shè)置 overflow 屬性為 hidden。這樣可以讓圖片溢出部分被隱藏，不影響布局效果。

接下來，我們將圖片設(shè)置為絕對(duì)定位，寬度和高度都設(shè)置為 100%。這樣圖片會(huì)充滿整個(gè)父容器。不過僅僅如此還不夠，圖片有可能會(huì)拉升或壓縮，而導(dǎo)致整張圖片變形。

為了保證圖片的比例不會(huì)被改變，我們還需要利用 object-fit 屬性。其可以設(shè)置填充方式，常用的有 cover 和 contain。cover 可以讓圖片在保持比例的前提下充滿整個(gè)父容器，而 contain 則可以讓圖片在保持比例的前提下完全呈現(xiàn)，但可能會(huì)留下空白。

希望本文對(duì)你理解如何使用 CSS 讓整張圖片充滿父容器有所幫助。實(shí)際應(yīng)用中，還可以使用其他技巧來處理一些特殊情況，例如響應(yīng)式布局等。