CSS是現代網頁設計中非常重要的一種技術，其中最為常用的就是設置寬高比例。通過設置寬高比例，我們可以很好的控制網頁元素的大小，從而實現一定程度的美觀度和統一性。

在CSS中，設置寬高比例通常就涉及到兩個屬性：width和height。其中，width用來設置元素的寬度，height用來設置元素的高度。但是，使用這兩個屬性單獨設置寬高比例會比較麻煩，在很多時候都需要使用其他的技巧來實現。

在這里，我們介紹兩種比較通用的設置寬高比例的方法，分別是使用padding和使用偽元素。

.ratio {
position: relative;
width: 100%;
padding-bottom: 56.25%;
/* 16:9 的視頻比例 */
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

第一種方法就是使用padding屬性，這個屬性是用來指定元素的內邊距，不過我們可以利用它的百分比值來實現寬高比例。具體地，我們在元素的父級容器上設置padding-bottom比例值，比如16:9視頻比例就是padding-bottom:56.25%，這樣一來父級容器就會保持16:9的比例，然后再將視頻元素放到父級容器內并且使用絕對定位，寬高為100%即可。這樣一來視頻元素就可以準確地填滿父級容器，而寬高比例也得以保持。

.ratio::before {
content: "";
display: block;
padding-bottom: 56.25%;
/* 16:9 的視頻比例 */
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

第二種方法是使用偽元素，我們可以通過在父級容器上創建一個偽元素來設置寬高比例。具體地，我們在父級容器上設置：before偽元素，并且將該元素的padding-bottom設置為寬高比例的比例值，然后再將視頻元素放到父級容器內并且使用絕對定位，寬高為100%即可。這樣一來偽元素也會根據比例值來保持16:9的比例，視頻元素同樣也可以準確地填滿父級容器，而寬高比例也得以保持。