<picture>仅负责资源选择，不控制尺寸或比例；图片响应式必须配合CSS：max-width: 100%、height: auto、display: block缺一不可，否则仍会溢出、变形或塌陷。
为什么只写 <picture> 无法让图片真正响应式
浏览器看到 <picture>，只做一件事：从 <source> 中选一个匹配的资源加载。它**不控制尺寸、不约束宽高比、不防止拉伸、不处理塌陷**。哪怕你写了十组 <source>，如果 CSS 没跟上，图片照样溢出容器、变形、在 Flex/Grid 里消失。
常见错误现象包括：
- 大屏下图片撑爆父容器（
max-width缺失） - 移动端竖图被强制拉成横图（
height: auto没配对） - Grid 项中图片高度为 0（
min-width: auto在 Chrome 中阻止收缩） -
<figure>包裹后仍不缩放（语义标签 ≠ 尺寸控制）
img 在 <picture> 内必须带 CSS 尺寸约束
<picture> 里的 <img> 是兜底项，也是最终渲染节点——所有样式必须落在它身上，而不是 <picture> 或 <source> 上。
关键规则只有三条，缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
max-width: 100%：防止撑破父容器 -
height: auto：保持原始宽高比（不能写height: 100%） -
display: block：避免行内元素默认的底部留白
示例：
picture img {
max-width: 100%;
height: auto;
display: block;
}
注意：width: 100% 单独使用是危险的——它会强制拉伸，破坏比例；max-width 才是安全上限。
Flex/Grid 容器中图片塌陷的典型修复点
当 <picture> 放在 display: flex 或 display: grid 的子项里，常出现高度塌陷或无法收缩，尤其在小屏下。
根本原因和修复方式：
- 父容器未设明确宽度或
flex-basis，导致子项无参考尺寸 → 给父项加flex: 1或显式width - Chrome 默认给 flex 项设
min-width: auto，阻止图片收缩 → 加min-width: 0 - Grid 项未限定高度且内容为空（如图片未加载完）→ 加
min-height: 0或用aspect-ratio预留空间 - 没设
object-fit，但又希望裁剪填充 → 仅在需要“覆盖”或“填充”时才加，别滥用
推荐组合（适用于卡片类布局）：
.card-img {
min-width: 0;
min-height: 0;
aspect-ratio: 16 / 9;
}
.card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
sizes 和 srcset 的 CSS 协同要点
sizes 告诉浏览器“这张图在页面中大概占多宽”，浏览器再结合设备 DPR 从 srcset 里挑最接近的资源。但如果 CSS 把容器宽度压得远小于 sizes 声明值，就会选错图。
容易踩的坑：
-
sizes="(max-width: 768px) 100vw, 50vw"，但实际容器被 CSS 设为max-width: 400px→ 浏览器仍按 100vw 计算，可能加载过大资源 - 用
rem或百分比设置容器宽度，但未考虑视口缩放或字体大小影响 → 优先用vw或flex相对单位 -
srcset里混用x和w描述符 → 不要混用，w更可靠（基于视口宽度），x依赖准确的 DPR 检测
验证方法：打开 DevTools → Network → 刷新 → 看图片请求的 URL 是否随视口缩放而切换；若始终加载同一张，大概率是 sizes 与实际布局脱节。
复杂点在于：CSS 控制“怎么显示”，HTML（srcset/sizes）控制“加载哪张”，二者必须对齐。一旦错位，性能优化就失效了——你精心准备的 300w 图片，可能在手机上仍加载了 1200w 版本。
