利用css的aspect-ratio设置元素宽高比

在响应式网页设计中，保持一致的纵横比（称为纵横比）对于防止布局累积偏移至关重要。 随着在 Chromium 88、Firefox 87 和 Safari Technology Preview 版本中引入纵横比属性“aspect-ratio”，让我们有了更简洁的方法来实现。

padding-top的实现

在没有这个属性的时候，以前的做法是利用padding-top的百分比特性。当设置padding-top的单位是百分比时，它的参考对象是父元素的宽度。为了图片等元素应用宽高比，我们还需要一个额外的容器元素。

比如我们要实现一个图片的宽度自适应且宽高比固定为 16:9:

<div class="parent">
  <div class="container">
    <img src="" alt="">
  </div>
</div>

使用padding-top，需要靠容器和绝对定位：

/* 16:9 比例容器 */
.container {
  width: 100%;
  padding-top: 56.25%; /* 9/16 */
  background-color: pink;
  position: relative;
}

.container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

aspect-ratio的实现

使用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产生了冲突的话，会以后者为准。

aspect-ratio对比padding-top

可以看出，使用 aspect-ratio 比 padding-top 更干净简洁，并且不会修改 padding 属性，防止它做超出其通常范围的事情。

这个新属性还增加了将纵横比设置为自动的能力，其中“具有固有纵横比的可替换元素使用该纵横比；否则框没有首选纵横比”。 如果同时指定了 auto 和 ` ，则首选纵横比是指定宽度除以高度的比率，除非它是具有固有纵横比的可替换元素，在这种情况下，将使用原生原生纵横比纵横比。

aspect-ratio兼容性

css aspect-ratio 属性的兼容性可以参考这个表格：

链接: https://www.fly63.com/article/detial/12327