通过使用 padding-top 百分比值基于父元素宽度的特性，可实现元素的等比例高度缩放。具体做法是设置外层容器 width 和 padding-top 以形成固定宽高比，再用绝对定位的内容层填充，从而创建响应式容器。例如 padding-top: 56.25% 对应 16:9 宽高比，适用于视频、图片卡片等场景，无需 JavaScript 即可实现良好兼容的响应式设计。
在 CSS 中，可以通过 padding-top 实现一个元素的等比例高度，也就是让容器的高度根据其宽度自动缩放，保持固定宽高比。这种方法常用于响应式设计中的视频容器、图片占位框或卡片布局。
原理：padding-top 的百分比是相对于父元素的宽度
关键点在于，CSS 中 padding 的百分比值是基于包含块（父元素）的宽度计算的，而不是高度。这意味着我们可以利用这个特性来创建一个与宽度成比例的高度。
例如：
- 设置
padding-top: 56.25%;表示高度是宽度的 56.25% - 这正好对应 16:9 的宽高比（因为 9 ÷ 16 = 0.5625）
实现步骤
以下是实现等比例高度的基本结构和样式：
立即学习“前端免费学习笔记（深入）”；
HTML 结构：
内容
CSS 样式：
.aspect-ratio-box {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 宽高比 */
}.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}说明：
- 外层容器不设高度，而是用
padding-top创造出“高度” - 内部的
.content使用绝对定位填满整个区域 - 这样无论屏幕多宽，容器都保持 16:9 的比例
常见宽高比对应的 padding-top 值
-
16:9 →
padding-top: 56.25%（9 ÷ 16） -
4:3 →
padding-top: 75%（3 ÷ 4） -
1:1 →
padding-top: 100%（正方形） -
21:9 →
padding-top: 42.86%（9 ÷ 21）
适用场景
这种技巧非常适合：
- 嵌入响应式视频（如 iframe 视频）
- 图片画廊中统一尺寸的卡片
- 移动端适配的横幅广告
基本上就这些。通过巧妙利用 padding-top 和绝对定位，就能轻松实现等比例缩放的容器，无需 JavaScript，兼容性也很好。
