绝对定位占位容器必须设position: relative，否则top/left百分比会向上寻找最近定位祖先；图片不能作为定位上下文，需用包裹div显式设relative；居中推荐top:50%+left:50%+transform:translate(-50%,-50%)；懒加载应监听占位div而非img；响应式占位需用aspect-ratio或padding-top降级方案，并注意Safari兼容性。
绝对定位占位容器必须设 position: relative
不加这句，top/left 百分比会往上找最近有定位的祖先——经常落到 body 上，一缩放或滚动就飘走。图片本身不能当定位上下文，<img> 加 position: relative 无效；必须用一个包裹 <div>，且这个 div 要显式设 position: relative。
常见错误：
• 直接对 <img> 设置 position: absolute 并期望它居中 —— 它会脱离文档流，父容器塌陷成 0 高
• 用 display: inline-block 替代 position: relative —— 不触发定位上下文，子元素仍脱标
top: 50% + left: 50% + transform: translate(-50%, -50%) 是通用居中解法
这套组合不依赖图片宽高，也不怕响应式缩放，比手动算 margin-top/margin-left 更可靠。但要注意：它居中的是整个 <img> 元素盒，不是图像内容 —— 如果用了 object-fit: cover，图像可视区域可能被裁剪，此时“居中”指容器盒中心，不是画面中心。
实操要点：
• <img> 必须设 position: absolute，且父容器已设 position: relative
• 不要同时写 width: 100% 和 height: 100% 再加 transform —— 容易拉伸变形，优先用 max-width: 100% + height: auto
• 若需强制填满容器，改用 object-fit: cover + overflow: hidden，而非靠 transform 拉伸
立即学习“前端免费学习笔记（深入）”；
懒加载触发时，IntersectionObserver 必须监听占位容器，不是 <img>
原生 loading="lazy" 在 position: absolute 的 <img> 上大概率失效，尤其当父容器高度为 0 或超出视口时。浏览器无法判断它是否进入可视区。
正确做法：
• 观察目标是那个 position: relative 的占位 <div>，不是里面的 <img>
• 加防抖（如 setTimeout 延迟 50ms），避免快速滚动时重复加载
• 加载失败后，记得 fallback 到 src 或显式显示错误占位图
• observer 初始化前，确认容器已渲染且有明确尺寸 —— Safari ≤15.4 对 height: 0 容器里的 padding-top 计算不稳定，建议加 min-height: 0.01px 或 line-height: 0 防忽略
响应式占位高度必须与最终图片渲染尺寸严格一致
布局抖动（CLS）根源不是图片慢，而是占位空间和实际图片尺寸不匹配。哪怕只差 1px，浏览器也会重排。
推荐方案：
• 服务端或构建时注入原始宽高到占位容器的 data-w/data-h 属性
• CSS 用 aspect-ratio: attr(data-w) / attr(data-h)（现代浏览器）
• 降级用 padding-top: calc(var(--h) / var(--w) * 100%) + --w/--h 自定义属性
• 禁止用 HTML width/height 属性 —— 它们会强制拉伸，破坏 object-fit 行为
容易被忽略的一点：Safari ≤15.4 完全忽略 aspect-ratio，且对 padding-top 在 height: 0 容器上的计算结果不可靠 —— 必须用 @supports (aspect-ratio: 1) 包裹现代写法，并在 fallback 中清掉 padding-top，否则高度翻倍。
