<picture> 不自动适配屏幕宽高比，它仅根据 media 查询选择资源；实际适配需 srcset + media + CSS 协同完成，其中 CSS 的 aspect-ratio 和 object-fit 决定渲染效果。
直接说结论：<picture> 本身不处理“设备比例”，它只负责根据媒体条件或源格式选择最合适的 <source> 图片；所谓“非标准设备比例”（比如 18:9、21:9）的适配，实际靠的是 srcset + media + CSS 的协同，而不是 <picture> 自动拉伸或裁剪。
为什么 <picture> 不会自动适配屏幕宽高比
<picture> 是一个**图片资源选择器**，不是布局或缩放控制器。浏览器只按你写的 media 查询（如 (max-aspect-ratio: 16/9)）匹配 <source>，然后加载对应 srcset 中的图——它不会修改图片的渲染尺寸或裁剪逻辑。
- 设备宽高比 ≠ 视口宽高比（例如折叠屏展开后视口可能是 21:9，但 CSS
aspect-ratio或容器限制可能仍是 16:9） -
media查询中aspect-ratio指的是 视口宽高比，不是设备物理屏比，且部分旧浏览器（如 Safari ≤15.4）不支持aspect-ratio媒体特性 - 即使匹配到某张图，最终显示效果仍取决于
<img>的 CSS（width、height、object-fit等）
真正起作用的三个关键配合点
要让不同宽高比设备拿到合适图片并合理显示，必须同时控制：资源选择、容器约束、图像填充行为。
-
资源选择层：用
<source media="(min-aspect-ratio: 21/9)" srcset="hero-21x9.webp">匹配超宽视口；注意 Safari 对min-aspect-ratio支持较晚，建议降级 fallback 到width或orientation -
容器约束层：给
<picture>或其父容器设aspect-ratio: 16/9或height: 0; padding-bottom: 56.25%，防止图片撑开布局 -
图像填充层：在
<img>上设object-fit: cover（裁剪居中）或contain（等比缩放），否则即使换了图，也可能留白或拉伸变形
常见错误：写了 <picture> 却还是显示错位
典型现象是图片被压缩、拉长，或左右/上下大片留白——这几乎 100% 是 CSS 层没跟上，而不是 <picture> 写错了。
立即学习“前端免费学习笔记（深入）”；
- 忘了给
<img>设display: block，导致默认 inline 元素产生基线间隙，影响高度计算 -
srcset里只写了像素密度（2x），没写宽度描述符（600w），导致<source>的media无法结合视口宽度做响应式选择 - 误以为
<source type="image/webp">能 fallback 到宽高比适配，其实它只管 MIME 类型，和尺寸无关 - 在
<source>中混用media和type，但没保证 fallback 的<img>有明确src和尺寸属性（width/height），导致首次加载时布局抖动
一个最小可行示例（含降级）
以下代码在 Chrome/Firefox/Edge 110+ 和 Safari 16.4+ 中可正确响应 21:9 视口，并 fallback 到常规 16:9 图：
<picture>
<source
media="(min-aspect-ratio: 21/9)"
srcset="hero-21x9.webp 1x, hero-21x9@2x.webp 2x"
type="image/webp">
<source
media="(min-aspect-ratio: 21/9)"
srcset="hero-21x9.jpg 1x, hero-21x9@2x.jpg 2x"
type="image/jpeg">
<source
srcset="hero-16x9.webp 1x, hero-16x9@2x.webp 2x"
type="image/webp">
<img
src="hero-16x9.jpg"
alt="Hero banner"
width="1600"
height="900"
style="width: 100%; height: auto; object-fit: cover;">
</picture>
注意：width/height 属性仍需保留，用于防止 layout shift；style 中的 object-fit 是决定“怎么填满容器”的关键，漏掉它，前面所有 <source> 都白配。
复杂点在于：宽高比媒体查询支持度不一，而用户实际看到的“比例”还受浏览器 UI（地址栏高度）、系统手势栏、横竖屏切换时机影响——这些都不是 <picture> 能感知的，得靠 JS 补充检测或更保守的 CSS 容器策略。
