<picture>仅负责选择合适图片资源，防止拉伸失真需配合img的width/height属性与max-width:100%、height:auto等CSS约束，确保等比缩放。
<picture> 本身不解决拉伸，它解决的是“该加载哪张图”；真正防止拉伸失真的，是配合 width、height 属性和 max-width: 100% 控制渲染上下文。
为什么只用 <picture> 会继续模糊或拉伸
很多人加了 <source> 和 srcset，但 <img> 标签没设 width/height，也没配 CSS 尺寸约束。结果浏览器仍按容器宽度缩放单张图——哪怕加载的是 1200px 宽的图，塞进 300px 容器里，GPU 还是得双线性插值，失真照旧。
关键点：
-
<picture>只管资源选择，不管渲染缩放 - 拉伸/模糊发生在
<img>渲染阶段，不是<source>阶段 - object-fit 对
<img>有效，但对<source>无效，且不能禁用插值
<img> 必须显式声明 width 和 height 属性
这是防止重排和失真的最轻量级手段。浏览器拿到这两个属性后，能提前预留宽高比，避免加载完成前布局跳动，也给缩放提供基准。
立即学习“前端免费学习笔记（深入）”；
正确写法：
<picture> <source media="(max-width: 480px)" srcset="mobile.jpg"> <source media="(max-width: 768px)" srcset="tablet.jpg"> <img src="desktop.jpg" width="1200" height="800" alt="示例"> </picture>
注意：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
width和height是 HTML 属性，不是 CSS，只接受纯数字（如1200，不能写1200px） - 值应为图片原始分辨率，或你期望的固有宽高比（比如 16:9 →
width="1600" height="900"） - 即使用了
sizes和srcset，这个属性也不能省——它是渲染锚点
CSS 必须加 max-width: 100% + height: auto
仅靠 HTML 属性只能防跳动，不能响应容器变化。CSS 要补上弹性约束：
picture img {
max-width: 100%;
height: auto;
}
这样做的效果：
-
max-width: 100%确保不撑破父容器 -
height: auto保持宽高比，避免纵向拉伸 - 两者结合，让浏览器在「已知原始宽高比」的前提下做等比缩放，大幅降低插值误差
别用 width: 100% 单独写——如果父容器没有明确宽度（比如 display: inline），它可能算错；max-width 更安全。
需要裁剪构图时，<picture> 才真正派上用场
当移动端必须突出人脸、桌面端要展示全景，这时 <source> 的 media 才起决定性作用：
<picture> <source media="(max-width: 480px)" srcset="crop-face.jpg"> <source media="(min-width: 481px)" srcset="full-scene.jpg"> <img src="fallback.jpg" width="800" height="600" alt="场景图"> </picture>
这种情况下，拉伸问题从根源上消失：每张图都匹配对应视口的构图与尺寸，无需缩放裁剪。但前提是，你得准备多张语义一致、构图适配的图源——这不是代码能绕过去的成本。
最容易被忽略的一点：所有 <source> 的 srcset 图片，其 <img> fallback 的 width/height 应该取最大公约宽高比，否则在 JS 动态插入或 SSR 场景下，首屏仍可能跳变。
