利用padding-top百分比基于父容器宽度的特性，结合绝对定位，可创建16:9、4:3等比例响应式容器，常用于视频嵌入、图片画廊和卡片布局，实现内容等比缩放。
在CSS中，可以利用 padding-top 实现一个根据宽度自动调整高度的比例容器，常用于响应式设计中的图片容器、视频嵌入或卡片布局。
原理：padding-top 的百分比是相对于父元素的宽度
当设置 padding-top 为百分比时，它的值是基于包含块（父容器）的 宽度 计算的，而不是高度。这个特性可以用来创建一个与宽度成比例的高度。
通过让内容区域使用绝对定位，配合 padding-top 的比例，就能实现等比缩放的容器。
常见用法：创建 16:9 或 4:3 的比例容器
例如，要创建一个 16:9 的响应式容器：
立即学习“前端免费学习笔记（深入）”；
PHP5 和 MySQL 圣经
下载
本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。
这里可以放视频、图片或其他内容
说明：
- 外层容器设置 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 百分比依赖宽度，再配合绝对定位即可实现自适应比例高度。
