在Web設計中，我們經常需要設置元素的寬高比，例如圖片、視頻等媒體元素。而在實際開發中，通常我們只能確定元素的寬度，而高度往往是不確定的。此時，如何使用CSS來設置元素的高度以達到我們想要的寬高比呢？下面我們通過代碼演示來解答這個問題。

// HTML結構示例
<div class="container">
<img src="example.jpg" class="image">
</div>
// CSS代碼示例
.container {
width: 100%; // 寬度設定為100%
position: relative; // 相對定位
padding-bottom: 56.25%; // 高度設定為寬度的56.25%
}
.image {
position: absolute; // 絕對定位
top: 0; // 吸頂
left: 0; // 吸邊
width: 100%; // 寬度設定為100%
height: 100%; // 高度設定為100%
}

上述代碼中，我們設置了容器元素的寬度為100%，并使用相對定位。接著，我們通過設置padding-bottom屬性來實現高度的設置。在這里，我們使用了一個常見的寬高比——16:9，即56.25%作為高度比例，而實際應用中，你可以根據自己的需要，改變這個比例來達到你想要的效果。

接下來，我們設置圖片元素的位置，讓它絕對定位于容器元素的左上角，并將寬高都設定為100%。這樣做，圖片元素就會根據容器元素的高度進行適配，而且圖片自身的寬高比例也會同樣適應。

總之，通過CSS設置寬高比是實現我們頁面布局的重要技巧。希望本文能夠幫助讀者更好地掌握此技巧。