宽高比

创建一个具有指定宽高比的响应式容器。

• 使用CSS自定义属性--aspect-ratio来定义所需的宽高比。
• 将容器元素设置为position: relative和height: 0，使用calc()函数和--aspect-ratio自定义属性来计算其高度。
• 将容器元素的直接子元素设置为position: absolute，并填充其父元素，同时给它设置object-fit: cover以保持宽高比。

<div class="container">
  <img src="https://picsum.photos/id/119/800/450" />
</div>

.container {
  --aspect-ratio: 16/9;
  position: relative;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

.container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}