aspect-ratio

可以固定一个盒子的纵横比 任何具有宽高的元素都可以使用aspect
aspect-ratio 属性接收以 “/” 分隔的两个数字作为属性值，分别代表宽度和高度的比例，例如 16 / 9 表示 16:9 的纵横比， 5 / 4 表示 5:4 的纵横比：

aspect-ratio: 16 / 9;  // 纵横比为 16:9
aspect-ratio: 5 / 4;  // 纵横比为 5:4

https://blog.csdn.net/qq_60353088/article/details/125955103
aspect-ratio 媒体属性可以用来测试视口的宽高比。当然上述例子比较简单，来看看MDN中给出的纵横比的示例

/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}

/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff;  /* cyan */
  }
}

/* 明确的宽高比, 放在最下部防止同时满足条件时的覆盖*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}