在Web設計中，我們經常需要讓網頁元素的寬度自適應瀏覽器窗口大小的變化。而對于高度的自適應，卻需要我們用一些特殊的技巧來實現。那么，如何讓CSS高度適應寬度呢？下面就讓我們來一探究竟。

第一種方式是通過設置padding-top或padding-bottom屬性來實現。如果我們希望在一個div內部嵌入一個縱向的比例為16:9的視頻，那么可以設置該div的padding-top屬性為56.25%（即9除以16乘以100），這樣可以保證該div的高度隨著寬度的變化而自適應。當然，這種方法并不僅僅適用于視頻，對于其他的縱向比例也同樣適用。

.video-wrapper {
position: relative;
padding-top: 56.25%;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

第二種方式是通過使用偽元素來實現。我們可以在需要自適應高度的元素上添加一個:before或:after偽元素，然后使用padding-top屬性和content屬性來實現高度的自適應。如下所示：

.div-with-pseudo {
position: relative;
}
.div-with-pseudo:before {
content: "";
display: block;
padding-top: 56.25%; /* 假設該元素的縱向比例為16:9 */
}
.div-with-pseudo-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

第三種方式是使用flex布局。我們可以在父元素上設置display:flex，并將高度設置為0，然后在子元素上使用flex-grow屬性實現高度的自適應。如下所示：

.flex-container {
display: flex;
height: 0;
}
.flex-item {
flex-grow: 1;
}

以上就是幾種常用的讓CSS高度適應寬度的方法。不同的應用場景可能需要選擇不同的方式，希望對大家有所幫助。