使用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.5625background: lightgray; // 可视化容器，可以删除
}.aspect-ratio-box-content {position: absolute;top: 0;right: 0;bottom: 0;left: 0;
}