CSS中設置高寬比是非常重要的一項技能，在網頁設計中經常用到。在使用CSS設置高寬比的時候，我們需要使用兩個屬性：width和height。

.box {
width: 300px;
height: 200px;
}

上面的代碼將會把.box類的寬度設置為300像素，高度設置為200像素。這意味著.box會以2:3的比例來顯示。

有時候，我們希望元素使用一個特定的比例來顯示。例如，我們希望一個圖片的寬度為300像素，高度為200像素。我們可以使用CSS的padding-top屬性來設置一個特定的高寬比：

.box {
width: 300px;
padding-top: 66.6%;
}

在上面的代碼中，設置了一個寬度為300像素的容器元素，并使用padding-top來設置高寬比。66.6%是200除以300的結果，這意味著這個元素將以高度為寬度的2:3比例來顯示。

有時候，我們也可以使用JavaScript來動態設置高寬比。比如，我們可以使用jQuery:

$(window).resize(function(){
var height = $(window).height();
var width = $(window).width();
var ratio = height / width;
$(".box").css("padding-top", ratio * 100 + "%");
});

上面的代碼將在窗口大小改變時，動態計算高寬比，并使用CSS的padding-top屬性來設置高寬比。

總之，在CSS中設置高寬比是非常方便且重要的。它可以幫助我們優化頁面的顯示效果，并提高用戶體驗。