根据最新的浏览器chrom88稳定版发布的信息，aspect-ratio得到完全支持，让我们通过实践来了解其应用场景。
了解攻击射频
aspect ratio翻译成中文是长宽比(也称为长宽比)，即x:y。 我们日常生活中常见的宽高比为4:3和16:9。 图：
x:y=4:3
为什么会有这个属性呢？
因为通常只有被替换的元素具有纵横比，尤其是图像。 在这些情况下，如果仅指定宽度和高度之一，则可以使用唯一的纵横比计算另一个。 但是，大多数元素都不具有此属性。 此属性允许您为其他元素显式指定纵横比，以获得类似的行为。 随着技术的发展，保持宽高比对网络员工来说越来越重要。 特别是需要同时适应元素尺寸不同的设备时。
2、上一个解决方案：填充顶
当chrome88之前不支持aspect-ratio时，主要方案是使用填充顶或填充底解决。
在谈论填充顶部之前，请考虑使用一个div来实现宽度为200px、高度为0的正方形。
width: 200px；
height: 0；
？
复制代码
很多来面试的同学都是直接padding-top: 100%或padding-bottom: 100%； 那么就错了。 表现如下。
为什么呢？ 因为您忘记了填充顶部的百分比是基于父元素的宽度计算的概念。
因此，填充顶： 200 px；
还是想想：用div实现一个自适应的正方形？ 答案是什么，请自己调查一下。
该方案也被称为“填充-顶层攻击”。 此解决方案需要父容器和绝对放置的子容器。 然后，可以将纵横比计算为百分比，并将其设置为填充顶部。 例如：
1:1宽高比=1/1=1=padding-top: 100%
4:3宽高比=3/4=0.75=填充顶： 75 %
3:2宽高比=2/3=0.66666=padding-top :66.67 %
16:9宽高比=9/16=0.5625=填充顶：56.25 %
现在，纵横比已确定，可以应用于父容器。 考虑以下示例：
. container {
position: relative；
width: 100%；
padding-top: 100%； /* 1:1 Aspect Ratio */
}
. media {
位置： absolute；
top: 0；
}
复制代码
3、使用aspect-ratio
不幸的是，使用填充顶点计算纵横比不是直观的。 需要额外的费用和定位。 新的aspect-ratio属性使保持纵横比变得更加明显。
在本例中，将填充顶部： 100 %更改为aspect-ratio: 1/1，以设置宽度/高度的比率
. container {
width: 100%；
aspect-ratio: 1/1；
border-radius: 4px 4px 0 0；
Overflow :隐藏；
}
. media {
/* position: absolute；
top: 0； */
}
复制代码
此新属性还添加了将纵横比设置为auto的功能。 其中，“具有唯一纵横比的可替换元素将使用此纵横比。 否则，此框没有首选的宽高比”。 同时指定auto时，长宽比优选为指定的宽度与高度之比。 然而，只要它不是具有唯一纵横比的可替换元素，就使用纵横比。
示例1 :保持网格一致性
这对于CSS布局机制(如CSS网格和Flexbox )也非常有用。 想想名单。 其中，需要保持纵横比1:1的子水平。 示例：
. grid {
显示：网格；
网格模板列3360 repeat (自动文件，minmax(120px，1fr )；
}
. subgrid img {
aspect-ratio: 1/1；
width: 100%；
object-fit: contain；
}
复制代码
例2 :防止布局偏移
可以使用aspect-ratio属性创建占位符空间，以防止布局偏移并提高性能。
例3 )为可替换元素设置指定的宽度和高度，将现有大小转换为优选的纵横比，并提供首选的纵横比，从而提供自然的高度或宽度。
img { width: 100%； }
复制代码
同样，将iframe设置为width和height以获得与图像相同的纵横比。 示例：
@ supports (aspect-ratio : attr (宽度编号)/1 ) )。
iframe {
apect-ratio : attr (width number )/attr (height number )；
width: 100%； height :自动；
}
}
复制代码
总之。 新的aspect-ratioCSS属性使在各种现代浏览器中保持媒体或布局容器中的适当纵横比变得容易。
注：照片来自互联网
参考资料：