padding-top能提前留白是因为其百分比值基于父容器宽度计算，可在图片加载前按目标宽高比（如16:9→56.25%）精准撑开高度，避免闪烁；需配合position: relative与绝对定位图片（top:0;left:0;width:100%;height:100%;object-fit:cover）使用，且现代浏览器应通过@supports屏蔽以防叠加。
为什么padding-top能提前留白
浏览器解析HTML时，如果没宽高、父容器也没固定尺寸，渲染引擎就按0高度占位，等图片加载完才撑开——这中间的空白期就是闪烁来源。
padding-top利用盒模型特性：当父容器设position: relative且padding-top为百分比值时，该百分比是相对于**父容器宽度**计算的，从而在不依赖图片加载的前提下，稳稳撑出正确比例的高度。
padding-top值怎么算才对
必须用（目标高度 ÷ 目标宽度）× 100%，不是随便写个75%就完事。常见比例对应值如下：
- 16:9 →
padding-top: 56.25% - 4:3 →
padding-top: 75% - 1:1 →
padding-top: 100% - 21:9（超宽屏）→
padding-top: 42.857%
写错会直接导致留白过高或过低，后续图片拉伸或裁剪异常。别用min-height替代，它不触发宽度基准计算，无法实现比例占位。
绝对定位图片必须配齐这四条
仅靠padding-top只能撑高父容器，图片本身还得精准覆盖进去，否则会偏移、溢出或留白。缺一不可：
- 父容器加
position: relative（否则absolute脱出上下文） - 图片加
position: absolute; top: 0; left: 0; - 图片加
width: 100%; height: 100%（只写width: 100%不够，高度必须显式拉满） - 必须配
object-fit: cover或contain，否则图片会变形或不填满
@supports里删padding-top但别删relative
现代浏览器支持aspect-ratio后，要用@supports (aspect-ratio: 1)把padding-top清掉，否则两者叠加会导致高度翻倍。但注意：position: relative不能删——它是absolute定位的前提，也是aspect-ratio方案里图片居中/缩放的锚点。很多项目在这里漏掉，结果新旧浏览器都错位。
最容易被忽略的是：padding-top方案下，图片的height: 100%完全依赖父容器的padding-top撑高，一旦父容器有max-height或flex: 1干扰，留白立刻失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
