css实现元素固定宽高比

视频的宽高比例一般是4:3，在一些视频类的网站缩放页面大小时发现视频画面的比例也都是固定的，这样画面不会受到影响，简单说下实现固定元素宽高比的两种办法：
1，设置padding-top来实现
使用内边距来实现时，需要为目标元素设置一个父元素，然后再为目标元素设置百分比内边距来实现固定宽高比例，因为元素的内外边距设置为百分比时，是以父元素的高度来计算的

<div class="box">
    <div class="aspect"></div>
 </div>

.box{
  width: 50%;
  margin: auto;
}
.aspect {
  background: orange;
  padding-top: 75%;
}

2. 使用css的 aspect-ratio来实现
这种方法比较简单，不用再嵌套父元素了，而且兼容性也还可以

 <div class="aspect"></div>

.aspect {
  background: orange;
  margin: auto;
  width: 50%;
  aspect-ratio: 4/3;
}

实现的效果是一样的