<picture>标签本身不决定宽度，真正起作用的是其包裹的<img>及配套CSS；需同时设置display: block; width: 100%; height: auto;，并确保父容器有明确宽度、srcset与sizes精准匹配布局宽度，三者缺一不可。
<img> 和配套 CSS；所谓“完美配比”，本质是让 <img> 在不同视口下既不溢出、也不留白，同时避免拉伸变形。
为什么直接写 <picture><img src="x.jpg"></picture> 还是会撑破容器
因为 <picture> 是透明容器，它不设样式、不占空间，所有尺寸行为都由内部 <img> 决定。而默认情况下，<img> 会按原始像素宽高渲染，哪怕父容器只有 300px 宽，一张 1200px 宽的图照样原样铺开。
- 常见错误：只给
<picture>设width: 100%，但没管里面的<img> - 更隐蔽的问题：HTML 中写了
width="1200" height="800"属性，CSS 的max-width: 100%就会被无视 - Flex/Grid 容器里，
<img>默认带min-width: auto，会死守原始宽度，max-width: 100%形同虚设
<img> 必须加这三行 CSS 才能真自适应
仅靠 max-width: 100%; height: auto; 不够——它只在父容器有明确宽度时才生效。实际项目中，你要补全下面三点：
-
display: block;：消除<img>默认的 inline 基线间隙，避免底部多出空白 -
width: 100%;（或max-width: 100%）：强制宽度上限为容器宽度 -
height: auto;：保持宽高比，防止压缩变形
示例：
<picture> <source media="(max-width: 768px)" srcset="small.jpg"> <source media="(max-width: 1200px)" srcset="medium.jpg"> <img src="large.jpg" alt="响应式图片"> </picture>
picture img {
display: block;
width: 100%;
height: auto;
}
srcset 和 sizes 不配对，<picture> 就白搭
<picture> 的响应式能力，一半靠 media，另一半靠 srcset + sizes 的精确匹配。如果只写 srcset 不写 sizes，浏览器不知道“这个图在当前布局下应该占多宽”，就只能瞎猜，结果往往是小屏加载了大图。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<img src="fallback.jpg" srcset="a.jpg 320w, b.jpg 768w, c.jpg 1200w" sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1100px"> -
sizes值必须和实际布局宽度一致，比如卡片内图片宽度是容器的 90%，就要写sizes="90vw"或具体数值 - Chrome DevTools 的 Network 面板里看 “Initiator” 列，能验证是否真的加载了对应尺寸的图
移动端老 iOS Safari 下 object-fit 失效怎么办
如果你用 <picture> 实现的是「固定高度+宽度自适应」（比如卡片头图），大概率会用到 object-fit: cover。但 iOS 12 及更早版本不支持 object-fit，且无 -webkit- 前缀可用。
- 兼容方案一：改用
background-image+background-size: cover，把<picture>拆出来作为隐藏的<div>后备图源 - 兼容方案二：降级为
object-fit: fill+ 显式裁剪容器（overflow: hidden），虽失真但至少不溢出 - 注意：iOS 13+ 已全面支持
object-fit，若目标用户基本是 iOS 14+，可放心用
<img> 的渲染行为、父容器的布局上下文、以及 srcset/sizes 是否真实匹配页面结构——这三个点没对齐，<picture> 再标准也出不了“完美配比”。
