利用padding-top百分比基于父容器宽度的特性，结合绝对定位，可创建16:9、4:3等比例响应式容器，常用于视频嵌入、图片画廊和卡片布局，实现内容等比缩放。
在CSS中，可以利用 padding-top 实现一个根据宽度自动调整高度的比例容器，常用于响应式设计中的图片容器、视频嵌入或卡片布局。
原理：padding-top 的百分比是相对于父元素的宽度
当设置 padding-top 为百分比时，它的值是基于包含块（父容器）的 宽度 计算的，而不是高度。这个特性可以用来创建一个与宽度成比例的高度。
通过让内容区域使用绝对定位，配合 padding-top 的比例，就能实现等比缩放的容器。
常见用法：创建 16:9 或 4:3 的比例容器
例如，要创建一个 16:9 的响应式容器：
立即学习“前端免费学习笔记（深入）”；
这里可以放视频、图片或其他内容
说明：
- 外层容器设置 position: relative 和 width: 100%
- padding-top: 56.25% 对应 16:9 比例（9 ÷ 16 = 0.5625）
- 内部元素使用 absolute 填满整个容器
其他常用比例参考：
- 4:3 容器：padding-top: 75% （3 ÷ 4 = 0.75）
- 1:1 正方形：padding-top: 100%
- 21:9 超宽屏：padding-top: ~42.86% （9 ÷ 21 ≈ 0.4286）
实际应用场景
这种技巧广泛用于：
- 嵌入 YouTube 或 Vimeo 视频，保持比例不被拉伸
- 响应式图片画廊，每个图项保持统一比例
- 移动端适配的卡片组件
基本上就这些，不复杂但很实用。只需记住 padding-top 百分比依赖宽度，再配合绝对定位即可实现自适应比例高度。
