17370845950

利用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 百分比依赖宽度，再配合绝对定位即可实现自适应比例高度。