css高度根据宽度自适应显示，按比例显示宽高

在项目中，我们经常遇到这样的需求，高度或者宽度需要按照比例显示，这时候就可以使用aspect-ratio属性解决问题，也可以使用padding-top: 解决

// padding-top
.container {
  width: 100%;
  padding-top: 50%;
}

// aspect-ratio 例：宽100，高50
.container {
  width: 100%;
  aspect-ratio: 2 / 1;
}

.container {
  height: 100%;
  padding-left: 50%;
}

// aspect-ratio
.container {
  height: 100%;
  aspect-ratio: 2 / 1;
}

// 例：这里备注一下，calc只能加减，别走偏了
 width:calc(100% - 50px);