在網頁設計中，設置div的寬高比例是非常重要的一個問題。通過CSS，我們可以輕松地實現這一目標。本文將介紹一些設置div寬高比例的方法。 首先，我們需要知道一個div的寬高比例可以通過CSS屬性padding實現。padding屬性有四個值，分別表示上、右、下、左四個方向的內邊距。如果我們把上下兩個方向的內邊距設置成相等的值，那么這個div的寬高比例就是1:1。如果我們把上下兩個方向的內邊距設置成不相等的值，那么這個div的寬高比例就會發生改變。下面是一個例子：

div {
width: 300px;
padding-top: 100%; /*設置div的寬高比例為4:3*/
background-color: #f00;
}

在上述代碼中，我們把div的寬度設置為300px，把padding-top設置為100%。這樣，div的高度就會等于div寬度的100%。因為這個div的寬高比例是1:1，我們可以通過調整padding-top的值來改變寬高比例。 當我們需要設置一個不同于1:1的寬高比例時，我們需要把寬度和高度分別設置成不同的值。我們可以使用CSS的calc函數來實現這個目標。例如，如果我們需要設置一個寬高比例為16:9的div，可以這樣寫代碼：

div {
width: 300px;
height: calc(300px * 9 / 16);
background-color: #f00;
}

在上述代碼中，我們把div的寬度設置為300px，把高度設置為300px*9/16。這樣，div的寬高比例就是16:9了。 總之，設置div寬高比例是CSS編寫中比較基礎的技能，我們需要根據實際需要來靈活調整寬高比例。通過使用CSS的padding和calc屬性，我們可以輕松地實現我們想要的效果。