padding-top实现等比矩形的原理是利用块级元素的padding百分比基于父容器宽度计算的特性，如设padding-top: 56.25%（16:9），则高度=父宽×0.5625，从而锁定宽高比。
padding-top 实现等比矩形的原理是什么
用 padding-top 做等比矩形，本质是利用「块级元素 padding 百分比值基于父容器宽度计算」这一特性。比如设 padding-top: 56.25%（16:9），实际高度就等于父宽 × 0.5625，从而脱离内容高度、实现宽高锁定。
- 父容器必须有明确宽度（比如
width: 100%或固定值），否则百分比 padding 无效 - 内容区域不能靠 height 控制，得用绝对定位撑开，否则 padding 会把内容往下顶
- 不要给子元素设
height: 100%—— 它对 padding 产生的“高度”不生效，只会导致溢出或塌陷
怎么写 HTML 结构才能让内部内容铺满整个矩形
结构必须满足：外层占位（靠 padding）、内层绝对定位、内容相对内层铺满。
<div class="aspect-box">
<div class="aspect-content">
@@##@@
</div>
</div>
- 外层
.aspect-box设position: relative+padding-top（如56.25%）+width: 100% - 内层
.aspect-content设position: absolute+top: 0+left: 0+right: 0+bottom: 0 - 图片或其他内容直接放里面，不用额外设尺寸；若需居中可加
object-fit: cover或transform
为什么 img 或 video 在里面会错位或留白
常见错误是忘了重置默认样式或忽略替换元素行为：
-
<img src="..." alt="">默认是 inline 元素，底部有基线间隙，加display: block或vertical-align: top -
<video></video>可能自带 poster 或 controls 高度，影响铺满，建议显式设width: 100%+height: 100%+object-fit: cover - 如果用了
background-image，注意 background-size 默认是auto，得配background-size: cover和background-position: center - 绝对定位的内层如果没设
box-sizing: border-box，而你又加了 padding/border，会导致实际尺寸超限
响应式下如何保持比例不崩、内容不拉伸
纯 padding-top 方案在 viewport 缩放时天然自适应，但要注意：
- 不要用
max-width+height: auto混搭，那会破坏 padding 高度逻辑 - 移动端小屏下，文字或按钮可能被压缩，应在
.aspect-content里用 rem/em 或媒体查询单独调字号 - 如果需要支持全屏（比如模态框里的视频），不要只靠 padding，得监听
resize并用 JS 补充修正（极少数场景才需） - Safari 对
padding-bottom的百分比支持更稳，但这里必须用padding-top，因为要配合top: 0定位起点
实际最常被忽略的一点：父容器的 width 是从哪来的？如果它嵌套在 flex/grid 容器里且没设宽，padding-top 就会按 0 计算 —— 这时候得回溯布局链，而不是改 padding 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
