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布局等方法。但无论使用哪种方法，原理都是相似的：通过设置元素的宽高比例，来限定它的大小和形状。