寬隨高變化是指根據(jù)元素的高度來自動(dòng)調(diào)整其寬度大小，使得元素保持一個(gè)正方形或長(zhǎng)方形的比例。在 CSS 中，我們可以通過利用 padding 或者百分比來實(shí)現(xiàn)寬隨高變化。

.square {
width: 50%;
height: 0;
padding-bottom: 50%;
}

上面這段代碼中的 padding-bottom 屬性值等于 width 屬性值，因此元素的寬度會(huì)根據(jù)高度自動(dòng)調(diào)整。

.rectangle {
width: 40%;
height: 0;
padding-bottom: 20%;
}

如果要?jiǎng)?chuàng)建一個(gè)長(zhǎng)方形的元素，我們只需要將 padding-bottom 屬性值設(shè)置為 width 屬性值的一半即可。

寬隨高變化能夠增強(qiáng)我們網(wǎng)頁(yè)的靈活性和適應(yīng)性，特別是在移動(dòng)端設(shè)備上。這種技術(shù)可以應(yīng)用于圖片、視頻等元素，使其始終保持某種比例，不會(huì)因?yàn)橐暱诖笮∽兓ッ烙^。