卡片中留白或错图并非浏览器不支持，而是其结构容错极低：漏、media缺括号、srcset路径404均会静默fallback至空白或兜底图，尤其在grid/flex布局中破坏栅格对齐；所有图片须统一宽高比，sizes必须匹配css真实布局宽度，否则加载错图或拉伸失真。
为什么卡片里用 容易留白或错图
不是浏览器不支持，而是 <picture></picture> 在卡片布局中对结构容错极低：漏掉 <img>、media 缺括号、srcset 路径 404，都会静默 fallback 到空白或兜底图——尤其在 grid 或 flex 卡片里，留白会直接破坏栅格对齐。
常见现象：<source media="max-width: 768px"></source>（缺括号）→ 所有 <source></source> 被跳过 → 只加载 <img src>；但若该 src 也 404，卡片就塌陷成一条线。
-
media必须写全括号：media="(max-width: 768px)"，不能省略外层() - 所有
srcset和<img>的src必须真实存在，Network 面板清缓存后确认请求发出 - 卡片容器若设了固定高度（如
height: 200px），而图片加载失败，就会撑不满，视觉上“被裁掉”
卡片宽高比不一致时 怎么避免拉伸失真
响应式卡片常用 aspect-ratio: 3/4 或伪元素占位，但 <picture></picture> 本身不控制宽高——它只选图。如果不同 <source></source> 对应的图片宽高比不一致（比如手机版是 4:5，桌面版是 16:9），object-fit: cover 会暴力裁剪，人脸可能被切掉一半。
- 所有
<source></source>的图片必须保持相同宽高比，否则 CSS 补救无效 - 推荐统一按卡片容器最大可能宽高比设计源图（如卡片在桌面端占 33vw × 200px，则按 33vw / 200px ≈ 1.65:1 准备所有版本）
- 若必须换构图（如 art direction 场景），用
object-position微调焦点：img { object-position: center top; }把手机版特写“锚定”在顶部
如何让 在 grid 卡片中正确响应断点
<picture></picture> 不读取卡片 CSS 宽度，只依赖 media 查询和 sizes。而卡片在 grid 中的实际宽度由 grid-template-columns 决定，若 sizes 还写 "100vw"，浏览器就会误判——明明卡片只占 300px，却去加载 1200w 的图。
-
sizes必须匹配真实布局逻辑：例如grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，则大屏下每张卡≈33vw，sizes应为"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" -
<source></source>的media断点要和卡片 CSS 断点严格对齐，比如卡片在768px切单列，则<source media="(max-width: 768px)"></source>就对应手机图 - 不要用
orientation: landscape做条件——iOS Safari 对横竖屏切换响应滞后，卡片可能卡在错误构图
懒加载 + 在卡片滚动时怎么不闪屏
卡片列表滚动时，loading="lazy" 是基础，但 <picture></picture> 加载异步图会导致高度塌陷、布局跳动。尤其首屏卡片若也 lazy，用户刚打开页面就看到一片空白。
- 首屏卡片的
<picture></picture>设loading="eager"，非首屏用loading="lazy" - 给卡片容器预设高度：用
aspect-ratio（现代浏览器）或伪元素占位（兼容 IE11） - 避免在
<source></source>里写sizes——它只认<img>上的sizes，写了也忽略，还容易写错 - 如果用 IntersectionObserver 手动触发高清图替换，确保降级图（如 WebP 失败时的 JPEG）已通过
<source type="image/jpeg"></source>声明，否则 fallback 会失败
真正难的不是写对 <picture></picture> 标签，而是让每张源图的宽高比、断点、sizes 计算值、CSS 布局宽度全部咬合——差一个像素、少一对括号、错一个单位，整排卡片就出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
