<picture> 仅是响应式图片的“智能调度容器”，不控制尺寸与渲染；真正实现炫酷大图需靠 <img> 的 width/height 属性及 CSS 的 max-width: 100%、object-fit: cover 等规则精准控制布局、缩放与视觉一致性。
<picture> 本身不“做大图”，它只是个容器，真正控制尺寸和渲染效果的是里面的 <img> 和 CSS。直接给 <img> 设 width/height 或用 CSS 的 max-width: 100%、object-fit 才能靠谱地“做大图”。
为什么不能只靠 <picture> 拉伸图片
<picture> 的作用是根据条件（如屏幕宽度、像素密度、格式支持）选择最合适的源图，它不接管布局、不定义尺寸、不处理缩放。浏览器会按内部 <img> 的固有尺寸或 CSS 规则渲染，如果没配好，大图可能被裁、模糊、留白，甚至不显示。
常见错误现象：
- 图片在大屏上还是小框，没铺满容器
- 换源后尺寸突变，页面跳动
-
<source>匹配成功但图片没显示——其实是<img>缺了src或srcset，而<picture>不会自动 fallback 到第一个<source>
必须给 <img> 设 width/height 或 CSS 尺寸
否则浏览器无法预留空间，可能触发 CLS（累积布局偏移），尤其在懒加载或异步加载时。
立即学习“前端免费学习笔记（深入）”；
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在
<img>上写width和height属性（推荐用原始宽高比，比如width="1920" height="1080"），让浏览器提前计算宽高比 - 用 CSS 控制最终大小：
.hero-img {<br> width: 100%;<br> max-width: 100vw;<br> height: auto;<br> object-fit: cover;<br>} - 避免只设
width: 100%却不设height或aspect-ratio，否则在低版本 Safari 中可能塌陷
响应式大图的 source 配置要点
目标不是“多图”，而是“在不同设备上用合适分辨率+格式的图，同时保持视觉尺寸一致”。关键在 media、srcset 和 sizes 的配合。
示例场景：全屏横幅大图，桌面用 WebP，移动端用更小 JPG：
<picture><br> <source media="(min-width: 768px)" type="image/webp" srcset="hero-1920.webp 1920w, hero-2560.webp 2560w" sizes="100vw"><br> <source media="(min-width: 768px)" type="image/jpeg" srcset="hero-1920.jpg 1920w, hero-2560.jpg 2560w" sizes="100vw"><br> <source type="image/jpeg" srcset="hero-768.jpg 768w, hero-1024.jpg 1024w" sizes="100vw"><br> <img src="hero-fallback.jpg" alt="Hero banner" width="1920" height="1080" class="hero-img"><br></picture>
注意点：
-
sizes必须写，告诉浏览器“这张图在对应 media 下会占多宽”，否则srcset中的w描述符无效 - 所有
<source>的media应覆盖完整范围，最后一条不带media的作为兜底 -
<img>的src是强制 required 的 fallback，即使你认为所有现代浏览器都支持<picture>，也得留着
object-fit: cover 是做大图最常用的值
当容器宽高比和图片不一致时，cover 能填满且不拉伸，但会裁剪边缘；contain 会完整显示但可能留白；fill 强制拉伸——基本不用。
容易踩的坑：
- 用了
object-fit却忘了加height（比如设了height: 50vh），否则它没作用 - 在 flex 容器里，父元素没设
align-items: stretch或min-height，导致子<img>高度塌缩 - WebP 图片在旧版 iOS Safari（≤13.3）不支持，得确保
<source>顺序正确，JPG fallback 真的能命中
真正难的不是写对 <picture> 标签，而是搞清设计稿的视口断点、图片资源的生成策略、CDN 是否支持 AVIF/WebP 自动转码，以及要不要为视网膜屏额外提供 2x 图——这些才是影响大图质量的关键变量。
