css: aspect-ratio 让元素的宽高比例缩放

css设置div宽高按照10/1显示，无论这个div的宽怎么变化，div的高都会是宽的十分之一，这就是aspect-ratio的作用，例如下面这个例子

.box{
  color:white;
  aspect-ratio:10 / 1;
  background:blue;
}

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

按照比例展示

假如说div的内容已经高于div显示的高度，那么div会根据内容的高度来显示，也就是说最小高度是宽度的十分之一，最高的就是按照内容的高度走

<div class="box">我是要显示的内容我是要显示的内容我是要显示的
内容我是要显示的内容我是要显示的内容我是要显示的内容我是要显
示的内容我是要显示的内容我是要显示的内容我是要显示的内
容我是要显示的内容</div>

根据内容显示的高度

假如说就想跟着比例走，即使内容超出比例的高度，那该怎么做呢？很简单，加上min-height:0就可以了，这样就可以让高度不根据内容计算了，而是固定的数值

.box{
  color:white;
  aspect-ratio:10 / 1;
  background:blue;
  min-height:0;
  width:522px;
}

<div class="box">我是要显示的内容我是要显示的内容我是要显示的
内容我是要显示的内容我是要显示的内容我是要显示的内容我是要显
示的内容我是要显示的内容我是要显示的内容我是要显示的内
容我是要显示的内容</div>

高度固定的数值

如果我们同时设置width和height，则aspect-ratio就不起作用了，就完全按照width和height设置的值显示

.box{
  color:white;
  aspect-ratio:10 / 1;
  background:blue;
  min-height:0;
  width:522px;
  height:30px;
}

<div class="box">我是要显示的内容我是要显示的内容我是要显示的
内容我是要显示的内容我是要显示的内容我是要显示的内容我是要显
示的内容我是要显示的内容我是要显示的内容我是要显示的内
容我

同时设置宽高时

假如我们设置了最大的宽度时300px，因为是块状元素，宽度是展开一行的，并且高度是按照比例走的，那么高度就是30px

.box{
  color:white;
  aspect-ratio:10 / 1;
  background:blue;
  min-height:0;
  max-width:300px;
}

<div class="box">我是要显示的内容我是要显示的内容我是要显示的
内容我是要显示的内容我是要显示的内容我是要显示的内容我是要显
示的内容我是要显示的内容我是要显示的内容我是要显示的内
容我

最大宽度时

所以根据以上的例子证明aspect-ratio的优先级是最低的：min-width>max-width>width>内容自适应>aspect-ratio或者min-height>max-height>height>内容自适应>aspect-ratio

假如我们在标签上用width或者height属性，aspect-ratio的优先级也是低的，例如:

<img class="img-size" src="mm.jpg" width="256" height="192">

aspect-ratio: 1 / 1;

最后结果还是按照标签属性上的width和height显示宽高，而不是aspect-ratio设置的1/1比例

综上所述，aspect-ratio的优先级是最低的，不过确实好用