原生 loading="lazy" 在网格布局中会导致塌陷跳动，因其不预留空间，需配合容器宽高比控制和伪元素动画。grid 项无默认高度，img 加载前为 0×0；aspect-ratio 在父项高度未定义时无效；旧版 safari 忽略 aspect-ratio；须用 aspect-ratio + position: relative 撑开高度，配合 object-fit 和伪元素占位动画，并注意响应式与 align-items 冲突问题。
原生 loading="lazy" 在网格布局中直接用会塌陷、跳动，必须配合容器级宽高比控制和伪元素动画才可靠。
为什么 grid 里 loading="lazy" 会失效
Grid 项默认不设高度，img 加载前是 0×0，loading="lazy" 只推迟请求，不预留空间。结果就是：首屏图片一加载，下面整行卡片突然下移——不是动画问题，是盒模型塌陷。
- Grid 容器设了
gap或align-items: start，但子项没撑开高度，img的aspect-ratio不生效（因为父项高度未定义） -
object-fit在无尺寸约束的容器里完全无效，裁剪和缩放都不可控 - 旧版 Safari（≤15.4）直接忽略
aspect-ratio，连带让整个占位逻辑归零
用 aspect-ratio + position: relative 撑开网格项高度
别指望 Grid 自动算出图片高度，得在每个网格单元（.card 或 .grid-item）上强制撑开比例空间。
- 给网格项加
aspect-ratio: 16 / 9，并设position: relative—— 这是伪元素动画和object-fit能工作的前提 - 图片本身写
width: 100%; height: auto; object-fit: cover;，且必须包裹在overflow: hidden的容器内，否则裁剪溢出 - 降级兼容 Safari ≤15.4：用
@supports not (aspect-ratio: 1)包裹padding-top: 56.25%+min-height: 0.01px，否则 padding 百分比被当 0 处理
伪元素动画只作用于占位层，不干扰真实图片
直接对 img 加 opacity 或 transform 动画会从 0×0 尺寸开始播，视觉突兀；正确做法是用 ::before 盖一层动态占位，等图加载完成再切状态。
-
img初始设opacity: 0; position: absolute; inset: 0;，确保它覆盖伪元素但不可见 -
::before用linear-gradient做条纹底纹 +background-position动画，避免transform触发重排 - JS 监听
load后加.loaded类，仅触发img的opacity: 1过渡，不改布局 - 禁用
visibility: hidden—— 它会让父容器高度塌回 0
响应式断点下宽高比不能靠 media query 硬切
为不同屏幕写多套 aspect-ratio 值（比如手机 4/3、桌面 16/9）看似合理，实则危险：Grid 项高度由 CSS 计算，断点切换时若 JS 正在加载图片，可能卡在中间比例导致错位。
- 统一用一个安全比例如
aspect-ratio: 4 / 3，覆盖多数内容场景；真有极端比例（如竖图），后端返回时额外加data-aspect="9/16"，JS 动态设style="--aspect-ratio: 9/16" - 不要在
@media里改aspect-ratio—— 浏览器不触发重绘，旧值残留 - 如果卡片内容含文字标题，记得给
.card设min-height: 0，否则 Flex/Grid 可能忽略aspect-ratio的高度约束
最易被忽略的是：网格项的 min-height 和 align-items 冲突。哪怕写了 aspect-ratio，如果父 Grid 设了 align-items: center，而子项没设 height: 100%，Safari 就会把它压扁——这个细节不调试根本看不出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
