图片的宽高等比例放大缩小使用padding-bottom来实现

使用padding-bottom来实现图片或容器的等比例放大和缩小是一个巧妙的技巧，特别是在制作响应式设计时。这种方法依赖于CSS的一个特点：当为元素设置百分比的padding-bottom或padding-top时，这个百分比是相对于其包含块（通常是父元素）的width，而不是height。

以下是如何使用这种方法来创建一个宽高比为16:9的响应式容器：

.aspect-ratio-box {
  position: relative;
  width: 100%;           // 你可以根据需要调整宽度
  padding-bottom: 56.25%; // 9 / 16 = 0.5625
  background: lightgray; // 可视化容器，可以删除
}

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