CSS是網(wǎng)頁設(shè)計(jì)中不可或缺的一部分，它可實(shí)現(xiàn)文本、圖片、視頻等元素的控制。在設(shè)計(jì)網(wǎng)頁時(shí)，如何讓圖片高度沾滿整個(gè)div容器是一個(gè)常見問題，下面我們就來探討一下如何實(shí)現(xiàn)。

/* html */
<div class="container">
<img src="圖片地址" class="img">
</div>
/* css */
.container {
position: relative; /* 父容器定位 */
width: 500px; /* 寬度為示例 */
height: 300px; /* 高度為示例 */
overflow: hidden; /* 溢出隱藏 */
}
.img {
position: absolute; /* 絕對(duì)定位 */
width: 100%; /* 寬度為父容器寬度 */
height: 100%; /* 高度為父容器高度 */
top: 0;
left: 0;
}

在 HTML 中，使用一個(gè)父容器`

`來包裹``元素，并給這個(gè)計(jì)數(shù)器設(shè)置一個(gè)確定的寬高。這里我們將``元素的高度和寬度都設(shè)置為100%。因?yàn)槲覀円呀?jīng)給計(jì)數(shù)器設(shè)置了一個(gè)固定的高度，所以``元素的高度也就被設(shè)置為了計(jì)數(shù)器的高度。

在 CSS 中，將父容器 `.container` 的`position`值設(shè)置為 `relative` 以保證定位參照物正確。同時(shí)設(shè)置 `overflow: hidden` 使父容器的溢出內(nèi)容隱藏。

將圖片 `.img` 的`position`值設(shè)置為 `absolute`，這樣它就可以相對(duì)于父容器進(jìn)行定位。然后，將圖片的高度和寬度設(shè)置為100%，并設(shè)定定位于左上角。這樣圖片就會(huì)高度沾滿整個(gè)父容器。

設(shè)計(jì)師可以更具實(shí)際情況，調(diào)整計(jì)數(shù)器和圖片的寬高以及位置。但總的來說，這是一種可靠的方法，可以讓圖片高度沾滿整個(gè)div容器。