创建一个宽度自适应确定比例的div —— aspect-ratio

为什么需要这样的控件

图片等拥有确定比例的控件，仅需要设置长宽中的一项即可控制等比例的缩放。
其他的却不具备此特定，需要同时设置宽高。
但等比例缩放 在自适应中是一个很重要的特性。

此外等比缩放控件可以用于创建轻量的占位内容，防止布局偏移

过去如何实现

<div class="ratio-parent">
  <div class="aspect-ratio"></div>
</div>

.ratio-parent {
  width: 200px; // 调整宽度，图形即可随之变化
}
.aspect-ratio {
  width: 100%;
  height: 0;
  padding-top: 100%; // 控制比例 相对于父元素
  background-color: red;
}

实现一个可用的容器

<div class="container">
  <img class="media" src="..." alt="...">
</div>

.container {
  position: relative;
  width: 100%; 
  // 此时 width 相对于祖先中定位的元素宽度
  padding-top: 56.25%; /* 16:9 Aspect Ratio */ 
  // 此时 padding 也相对于祖先中定位的元素宽度
}

.media {
  position: absolute;
  top: 0;
}

但此方法并不能直观的确定比例

css 新属性

aspect-ratio: 1 / 1;  // 宽高1：1

参考文章 知乎
参考文章2 知乎