css宽高比例固定

/* 使用 padding-bottom 实现宽高比例固定 */
.container {
  width: 100%; /* 宽度可以根据需要调整 */
  position: relative;
}

.aspect-ratio-box {
  padding-bottom: 56.25%; /* 16:9 的比例，计算方法：(9 / 16) * 100% */
  height: 0;
  background-color: lightblue;
}

.aspect-ratio-box-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

解释说明：

• .container 是外层容器，宽度可以根据实际需求调整。
• .aspect-ratio-box 通过设置 padding-bottom 来控制宽高比例。这里使用了 56.25%，这是基于常见的 16:9 比例计算得出的（即 (9 / 16) * 100% = 56.25%）。你可以根据需要调整这个百分比来实现不同的宽高比例。
• height: 0 确保盒子的高度完全由 padding-bottom 控制。
• .aspect-ratio-box-content 使用绝对定位，确保内容能够填充整个比例框。

这种方式适用于需要保持固定宽高比例的元素，如图片、视频或响应式布局中的其他内容。