必须为图片父容器设 position: relative 以建立定位上下文，再用 padding-top 百分比（如 56.25%）模拟宽高比，配合 img 的 position: absolute、inset: 0、width: 100%、height: 100% 和 object-fit: cover 实现响应式等比填充。
给图片父容器设 position: relative 是前提
直接对 <img> 设 position: absolute 没用，它会脱离文档流，但父容器若没建立定位上下文，absolute 的参照点就不可控，高度照样塌缩。必须先让父容器（比如 <div class="img-wrapper">）有 <code>position: relative，这样里面的 img 才能相对于它定位，同时父容器自身仍参与布局、可被赋予占位尺寸。
用 padding-top + position: absolute 模拟宽高比
这是兼容 Safari 15.3 及更早版本、Android WebView 等不支持 aspect-ratio 的核心 fallback 方案。原理是利用 padding-top 百分比值始终基于父容器宽度计算的特性，实现响应式占位。
- 父容器设
position: relative，且不能写height或max-height（否则覆盖 padding 效果） - 子容器或伪元素设
padding-top: 56.25%（对应 16:9），或75%（4:3） -
<img>设position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover - 务必加
inset: 0，等价于top: 0; right: 0; bottom: 0; left: 0，比单独写四个方向更简洁可靠
object-fit 必须配 height: 100%，不能留 height: auto
常见错误是写了 object-fit: cover 却保留 height: auto——这会让 img 无视父容器高度约束，按原始比例撑开，导致溢出或留白，抖动照旧。在 position: absolute 场景下，height: 100% 才能真正绑定到父容器计算出的高度上。
- 如果父容器靠
padding-top占位，那它的“高度”实际由 padding 决定，height: 100%才能准确拉伸图片填满 - 别用
min-height: 100%，它不保证填满，只设下限 -
object-fit值选cover（裁剪）或contain（等比缩放），避免fill（强制拉伸变形）
绝对定位后，父容器不能再依赖 display: flex 或 grid 自动撑高
一旦子 img 设了 position: absolute，它就完全脱离文档流，父容器不会再根据它内容撑高。此时若父容器本身是 flex 或 grid 项，又没设明确高度或最小高度，整个父容器可能塌成一条线，周围布局全乱。
- 确保父容器有显式高度来源：要么靠
padding-top（推荐），要么设min-height（破坏响应式，慎用） - 如果父容器是 Grid 子项，记得加
min-height: 0，否则默认min-height: auto会压制padding-top计算 - 别在媒体查询里动态改父容器的
display类型（比如从grid切到flex），这会销毁合成层，抖动比加载还明显
padding-top 值必须和图片实际宽高比严格对应，且父容器宽度必须可计算——如果父容器 width 是 auto 又没其他约束（比如 flex-basis 或 max-width），padding-top: 56.25% 就等于 0，整个 fallback 失效。
