picture元素本身不接受CSS样式控制尺寸适配，它只是容器；真正起作用的是内部<source>和最终<img>，尺寸适配必须靠CSS配合max-width、object-fit或布局系统落地，单独设置picture{width:100%}无效。
picture 元素本身不接受 CSS 样式控制图片尺寸适配，它只是容器；真正起响应式作用的是内部的 <source> 和最终的 <img>，而尺寸适配必须靠 CSS 配合 max-width、object-fit 或布局系统来落地。单独写 picture { width: 100%; } 没用，浏览器不会按这个缩放图片资源。
为什么直接给 picture 设 width/height 无效
picture 是一个不可替换的容器元素，它不渲染内容，也不参与盒模型尺寸计算。它的子元素 <source> 完全不可见，只有最后一个 <img> 才是实际渲染的替换元素。所以所有尺寸控制逻辑，最终都落在 img 上。
常见错误现象：picture 看起来“没反应”，图片溢出、比例错乱、在小屏上仍显示大图——本质是没管好里面的 img，或者没设 object-fit。
- 只给
picture加width: 100%，但img仍按原始宽高渲染，可能撑破父容器 - 没设
height或aspect-ratio，导致object-fit: cover行为不可预测 -
srcset提供了多尺寸资源，但sizes写错（比如漏掉单位或媒体条件不匹配），浏览器选错图
img 必须加 max-width: 100% 和 height: auto
这是防止图片撑破布局的底线规则。即使 picture 已包裹，img 仍需独立设置，否则在窄屏下可能水平滚动或破坏流式布局。
立即学习“前端免费学习笔记（深入）”；
示例写法：
picture img {
max-width: 100%;
height: auto;
display: block;
}
注意点：
-
display: block消除img默认的 inline 基线间隙 - 不要用
width: 100%替代max-width: 100%，否则小图会被强制拉伸变形 - 如果父容器有固定宽高（如卡片组件），需额外设
aspect-ratio或用object-fit
需要裁剪/填充时，object-fit 必须作用于 img，且容器要有明确尺寸
object-fit 只对替换元素生效，且仅在容器尺寸与图片原始尺寸不一致时才体现效果。这意味着：如果父容器没设宽高，object-fit: cover 就等于没写。
典型场景（如封面图占满卡片）：
.card-image {
width: 100%;
height: 200px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
关键条件：
- 容器（如
.card-image）必须有确定的width和height，或通过aspect-ratio+width: 100%推导出高度 -
img要设成width: 100%; height: 100%，才能触发object-fit计算 -
overflow: hidden防止cover溢出时出现滚动条或布局偏移
sizes 写错会导致 srcset 白配置
sizes 不是“告诉浏览器该用哪张图”，而是“告诉浏览器这张图在当前断点下大概占多宽”，浏览器再根据这个宽度从 srcset 中挑最接近的资源。写错就等于瞎指挥。
常见错误：
-
sizes="(max-width: 768px) 100vw"后面漏了默认项，如, 50vw，导致桌面端无法匹配 -
srcset里用x描述符（如hero@2x.jpg 2x）但sizes没提供设备像素比上下文，浏览器退回到第一项 - 媒体条件和实际布局断点不一致，比如 CSS 用
min-width: 769px，但sizes写(max-width: 768px)，中间缝隙导致 fallback 图被加载
建议写法（带 fallback）：
<picture> <source media="(max-width: 480px)" srcset="hero-sm.jpg 480w, hero-sm@2x.jpg 960w" sizes="100vw"> <source media="(max-width: 1024px)" srcset="hero-md.jpg 960w, hero-md@2x.jpg 1920w" sizes="50vw"> <img src="hero-lg.jpg" srcset="hero-lg.jpg 1440w, hero-lg@2x.jpg 2880w" sizes="33vw" alt="活动主视觉"> </picture>
真正容易被忽略的，是 sizes 和实际 CSS 布局的耦合——它不是独立存在的，一旦你用 Flex/Grid 改变图片容器的占位宽度，sizes 就得同步更新，否则浏览器拿到的“预期宽度”和真实渲染宽度对不上，srcset 就形同虚设。
