在响应式网页设计中，保持一致的纵横比（称为纵横比）对于防止布局累积偏移至关重要。 随着在 Chromium 88、Firefox 87 和 Safari Technology Preview 版本中引入纵横比属性“aspect-ratio”，让我们有了更简洁的方法来实现。
padding-top的实现
在没有这个属性的时候，以前的做法是利用padding-top的百分比特性。当设置padding-top的单位是百分比时，它的参考对象是父元素的宽度。为了图片等元素应用宽高比，我们还需要一个额外的容器元素。
“ Padding-Top Hack”方案需要一个父容器和一个绝对放置的子容器。然后，可以将宽高比计算为百分比以设置为padding-top。例如：
- 1：1长宽比= 1/1 = 1 =
padding-top: 100% - 4：3长宽比= 3/4 = 0.75 =
padding-top: 75% - 3：2长宽比= 2/3 = 0.66666 =
padding-top: 66.67% - 16：9长宽比= 9/16 = 0.5625 =
padding-top: 56.25%
比如我们要实现一个图片的宽度自适应且宽高比固定为 16:9:
<div class="parent">
<img src="" alt="">
</div>
使用padding-top，需要靠容器和绝对定位：
/* 16:9 比例容器 */
parent {
width: 100%;
padding-top: 56.25%; /* 9/16 */
background-color: pink;
position: relative;
}
img {
width: 100%;
position: absolute;
top: 0;
}
aspect-ratio的实现
**语法 : aspect-ratio: auto
auto： 默认值，它指定元素没有首选的纵横比，应该像往常一样调整自己的大小。因此，替换元素，如具有固有纵横比的图像，使用 该 纵横比。<ratio>: 由正斜杠 (/)分隔的两个正数值，它们周围有或没有空格，目标是元素的宽度和高度。在单个值的情况下，第二个值被认为是 1。涉及首选纵横比的大小计算适用于指定的框的尺寸box-sizing。initial： 应用属性的默认设置，即auto。inherit： 采用aspect-ratio父级的值。unset： 从元素中删除当前的纵横比。
使用aspect-ratio就要简单得多了：
.container img {
width: 100%;
aspect-ratio: 16 / 9;
}
"/" 和后面的高度比可以省略，默认为 1， 例如设置 aspect-ratio: 4，那么就是设置了 4:1：
aspect-ratio: 4;
aspect-ratio 属性值也可以设置为 auto，相当于是默认值，这样对于图片、视频这样有原始纵横比的，就会保持原始比例：
aspect-ratio: auto;
aspect-ratio 不仅可以用在 img 或 video 标签上，任何一个具有宽高的元素都可以使用它，在缩放的时候，保持一定的纵横比。
Ps：值得注意的是aspect-ratio的优先级比较低。当aspect-ratio和其他属性例如width、height、min-width、min-height产生了冲突的话，会以后者为准。
在一些场景下，维持长宽比显得非常的有用：
1.创建响应式 iframes，它们的宽度为父体的 100%，而高度应保持特定的视口比例。
2.为图片、视频和嵌入创建内在的占位容器，以防止项目加载时重新布局而占用空间。
3.为交互式数据可视化或 SVG 动画创建统一的、响应式的空间。
4.为多元素组件（如卡片或日历日期）创建统一的、响应的空间。
5.为不同尺寸的多幅图像创建统一的响应空间（可与 object-fit 一起使用）
防止布局移动
高宽比的另一大特点是，它可以创建占位符空间，以防止累积布局偏移。从API加载资产，当媒体加载完成后，会产生布局偏移
