项目场景：

在一些视频类网站，视频的 div 宽度会跟随浏览器的大小进行比例缩放，一般来说，我们 div 设置宽度 100% ， 高度写死，宽度可以根据屏幕缩小而改变 div 的宽度，但是高度不会变化，如果想要 div 的高度也随着宽度的变化而变化呢？

解决方案：aspect-ratio

aspect-ratio 是CSS 媒体属性 可以用来测试 viewport 的宽高比。例子如下：

.test {
   width: 100%;
   background-color:#f36;
   aspect-ratio:16/9;  /**  这里可以设置 成你想要的比例*/
}

兼容性

目前的兼容性还是可以的

更多

如果想了解这个属性的更多知识，可以点击了解更多