本文目錄導(dǎo)讀：

1. 使用百分比單位
2. 使用視窗單位（vw/vh）

CSS3技巧：圖片自適應(yīng)高度實(shí)現(xiàn)方法

在現(xiàn)代網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要讓圖片的高度自適應(yīng)以適應(yīng)不同的屏幕大小和分辨率，CSS3為我們提供了多種方法來實(shí)現(xiàn)這一目標(biāo)，本文將介紹幾種常用的方法，幫助您輕松實(shí)現(xiàn)圖片的高度自適應(yīng)。

使用百分比單位

我們可以使用百分比單位來設(shè)置圖片的高度，使其根據(jù)父元素的高度自動(dòng)調(diào)整，如果我們想讓圖片的高度等于其父元素高度的50%，可以這樣做：

img {
    height: 50%;
}

使用視窗單位（vw/vh）

視窗單位是一種相對單位，允許我們定義一個(gè)長度為視窗的一部分，vh代表視窗高度的百分比，我們可以使用vh單位來設(shè)置圖片的高度，使其隨著視窗大小的變化而自適應(yīng)調(diào)整。

img {
    height: 100vh; /* 圖片高度等于視窗高度的100% */
}

三. 使用對象適應(yīng)（object-fit）屬性

object-fit屬性允許您控制替換元素（如圖片）如何在容器內(nèi)適應(yīng)，結(jié)合使用height和object-fit屬性，您可以實(shí)現(xiàn)圖片的高度自適應(yīng)并保持其外觀的完整性。

img {
    width: 100%; /* 保證圖片寬度適應(yīng)容器 */
    height: auto; /* 高度自適應(yīng) */
    object-fit: cover; /* 保持圖片的完整性 */
}

四、使用媒體查詢（Media Queries）進(jìn)行響應(yīng)式設(shè)計(jì)

對于響應(yīng)式網(wǎng)頁設(shè)計(jì)，我們可以結(jié)合媒體查詢來根據(jù)屏幕大小調(diào)整圖片的高度，這樣，在不同的設(shè)備和屏幕尺寸上，圖片都能保持適當(dāng)?shù)谋壤惋@示效果。

/* 默認(rèn)情況下的樣式 */
img {
    height: auto; /* 高度自適應(yīng) */
}
/* 針對小屏幕設(shè)備的樣式 */
@media (max-width: 768px) {
    img {
        height: 100%; /* 在小屏幕上，圖片高度等于容器高度 */
    }
}

通過以上幾種方法，我們可以輕松實(shí)現(xiàn)圖片的高度自適應(yīng)，在實(shí)際應(yīng)用中，可以根據(jù)需求和場景選擇合適的方法來達(dá)到***佳效果。