CSS定寬高比的原理是一種在網頁中限定某個元素的寬和高比例的方法。比如我們想要將一張圖片的寬高比例固定為16:9，那么我們就可以通過CSS定寬高比的技術來實現這一點。

實現CSS定寬高比的方法有很多，其中最常用的方法是通過padding屬性來實現。padding屬性是一種用來設置元素內部填充空間的CSS屬性，我們可以利用它來設置元素的寬高比例。具體實現方法如下：

.container {
position: relative;
width: 100%;
padding-top: 56.25%; /*16:9的寬高比例*/
}
.child-element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

在上面的代碼中，我們首先定義了一個容器元素，它的寬度設置為100%。接著，我們通過padding-top屬性設置容器元素的上邊距為高度的百分之56.25，這個數值是16:9寬高比例的計算結果。這樣，容器元素的高度就是寬度的百分之56.25。

最后，我們再在容器元素里面添加一個子元素，將它的寬度和高度都設置為100%。這樣，子元素的寬高就會自動適應容器元素的大小，并且保持16:9的寬高比例。

除了使用padding屬性之外，還有一些其他的方法也可以實現CSS定寬高比。比如使用絕對定位、flex布局等方法。但無論使用哪種方法，原理都是相似的：通過設置元素的寬高比例，來限定它的大小和形狀。