<picture>标签不防变形，仅按条件选择预处理图片；变形由CSS渲染决定，需配合object-fit、height: auto等样式保比例；<source>顺序、断点语法及fallback图尺寸一致性至关重要。
picture 标签本身不防变形，它只选图
很多人以为写了 <picture> 就自动等比缩放、不会变形，这是误解。<picture> 的作用是**在多个预处理好的图片中按条件选一个**，它不改变图片渲染行为，也不控制缩放逻辑。变形是否发生，取决于你选中的那张图怎么被 CSS 渲染——比如有没有设 object-fit、有没有配 height: auto、容器有没有固定宽高比。
选对图只是第一步，渲染时还得保比例
即使 <source> 正确匹配到了移动端裁切图，如果这张图在页面里被写死 width="400" height="300"，或者 CSS 里只写了 width: 100% 却没写 height: auto，照样拉伸变形。
- 删掉所有
img标签里的width和height像素属性（HTML 属性），它们强制拉伸，和原始比例无关 - 给
img加基础样式：max-width: 100%; height: auto;—— 这是保比例的底线，适用于内容型图片 - 如果父容器高度固定（如卡片
height: 200px），height: auto失效，必须用object-fit: cover或contain，并确保容器有明确宽高（至少一个非auto） -
object-fit只在img是block或inline-block时可靠，加一句display: block避免换行符间隙干扰
media 断点写错，picture 就等于没写
90% 的 <picture> “没生效”，其实是 <source> 根本没被匹配上。浏览器线性扫描，第一个 media 为真就停，后面全忽略。顺序和语法稍错一点，小屏大屏全走 <img> 回退。
-
<source>必须放在<img>**之前**，DOM 顺序错位 = 静默失效 - 断点要从宽到窄排：
min-width: 1200px→min-width: 768px→max-width: 767px，别把手机规则放最前 -
media="(max-width: 768px)"缺括号（写成media="max-width: 768px"）会被完全忽略 - 避免重叠断点，比如
(max-width: 768px)和(min-width: 768px)在 768px 宽度时行为不确定
WebP fallback 不一致会引发 layout shift
用 <source type="image/webp"> + <source type="image/jpeg"> 做格式降级时，如果两张图的像素尺寸不一致（比如 WebP 是 1200×800，JPEG 是 1198×799），浏览器切换格式瞬间会重排布局，视觉上“闪一下”，用户感知就是图片突然跳动或变形。
立即学习“前端免费学习笔记（深入）”；
- 所有 fallback 图源（WebP/JPEG/AVIF）必须保持**完全相同的宽高像素值**
- 服务器返回的
Content-Type必须和type属性逐字符一致：image/webp≠image/webp;（分号不行） - Network 面板里看到
blocked:mime-type或 404，基本就是type和响应头对不上
<picture> 把选择权交给浏览器，但前提是你的图源准备得足够干净。 
