<picture>不能直接作卡片背景图，必须嵌套在卡片容器内并以<img>结尾，且需正确配置srcset、sizes及object-fit等属性以适配多端布局。
picture 标签不能直接当卡片背景图用
很多人一上来就想把 <picture> 当成 CSS 的 background-image 塞进卡片里，结果发现完全不生效——因为 <picture> 是语义容器，不是可渲染的视觉元素，它不接受 background 属性，也不能被伪元素覆盖或裁剪。
真正能放进卡片的，只有它内部的 <img>；而 <picture> 的作用，是让这个 <img> 在不同设备上加载更合适的资源。所以结构必须是：卡片容器 → <picture> → <img>（带 src 和 alt）。
-
<picture>必须以<img>结尾，且该<img>的src是必填兜底项，否则所有浏览器都回退失败 - 别在
<picture>外层再套一层<div>试图做定位，容易干扰 Flex/Grid 的尺寸计算 - 移动端卡片高度常由图片撑开，若
<img>没设height: auto或父容器没约束宽高，会导致卡片高度塌陷或溢出
在 flex-wrap 卡片流中正确嵌入 picture
当卡片用 display: flex + flex-wrap: wrap 实现多列自适应时，<picture> 要作为卡片内容的一部分嵌入，而不是替代卡片结构。常见错误是给 <picture> 设了固定宽高，导致它在小屏下无法随卡片收缩。
关键控制点在三处：卡片容器、<picture>、以及内部 <img>：
立即学习“前端免费学习笔记（深入）”；
- 卡片容器需设
min-width: 0（尤其在 Flex 子项中），否则内部图片即使写了max-width: 100%也不缩放 -
<picture>和<img>都要加width: 100%+height: 100%+object-fit: cover（或contain），否则图片会拉伸变形或留白 - 如果卡片用
flex: 1 1 280px，确保<picture>的父元素（比如.card-content）没设white-space: nowrap，否则长文本会把整个卡片撑宽，破坏换行
srcset + sizes 配置错一个括号，picture 就全失效
<picture> 不是“自动适配”，它靠浏览器按顺序匹配 <source> 的 media 和 sizes 来选图。一旦写错，比如 media="(min-width: 768px" 少了个右括号，或 sizes 缺失，浏览器就直接跳过所有 <source>，只加载最后那个 <img src>——你根本看不出问题，但用户手机正在下 4K 图。
-
<source>必须按匹配强度降序排列：从最具体（如media="(min-width: 1200px) and (resolution: 2dppx)"）到最宽泛（如media="(min-width: 768px)"） - 所有
<source>的type（如image/webp）必须与服务器实际响应头一致，否则该源会被忽略 - 移动端卡片宽度常是视口百分比，
sizes应写成sizes="(max-width: 767px) 100vw, (min-width: 768px) 50vw"，而不是固定像素值
IE11 和老版 iOS Safari 对 picture 支持有限
如果你的卡片需要兼容 IE11 或 iOS 12 及更早版本，<picture> 会直接被忽略，只显示 <img src>。这不是 bug，是原生不支持。
这时不能删掉 <picture>，而是得加降级策略：
- 用
<img srcset>+sizes替代部分场景（IE11 不支持<picture>，但支持srcset的宽度描述符） - 对 iOS 12–13，避免在
<source>中混用media和type，优先用media分辨率条件 - 卡片内图片若用于点击操作（如“查看详情”），务必确保
<img>的alt文本有意义，因为降级后它就是唯一内容
真正卡住人的，往往不是语法写不对，而是没意识到 <picture> 的每个属性都在和浏览器协商——它不保证结果，只提供选项；而卡片布局的弹性，又放大了任一环节松动带来的视觉断裂。
