<picture>标签不控制纵横比，真正起作用的是内部<img>的宽高、object-fit或其父容器的aspect-ratio；需重置<picture>为display: block以防布局偏移。
picture 标签本身不参与纵横比锁定
<picture> 是一个容器级语义化标签，只负责根据条件（media、type）选择最合适的 <source> 或兜底的 <img>，它对宽高比没有任何控制能力。浏览器渲染时，最终生效的仍是内部那个被选中的 <img> 元素——所以纵横比逻辑全在 <img> 及其父容器上，跟 <picture> 无关。
真正起作用的是 img 的 width/height + object-fit 或容器 aspect-ratio
常见错误是给 <picture> 或 <source> 加 aspect-ratio 或 width/height，但这些属性对 <source> 无效（它只是提示，不渲染），对 <picture> 加了也白加——它没有固有尺寸，高度由子元素撑开。
- 必须给内部的
<img>显式设宽高（如width="600" height="400"）或 CSS 尺寸（如width: 100%; height: auto），才能让浏览器预留空间、防布局偏移（CLS） - 若容器尺寸固定（比如卡片高 200px），则
<img>需配width: 100%; height: 100%; object-fit: cover，否则会拉伸 - 若想用现代方案，
aspect-ratio必须加在<picture>的**直接父容器**（如<div class="card-img">）上，再让<picture>和内部<img>填满该容器
srcset + sizes 不影响纵横比，但影响选图逻辑
srcset 和 sizes 只决定加载哪张图，不改变渲染行为。即使你为 16:9 图片提供了 srcset="a-800w.jpg 800w, a-1600w.jpg 1600w"，如果最终选中的图片本身是 4:3，而容器又没做比例约束，那依然会变形或留白。
- 确保所有
srcset中的图片都保持相同原始纵横比，否则object-fit会暴露比例差异（比如一张 16:9、一张 4:3，cover 下裁剪区域不同） -
sizes要写准，否则浏览器可能误判容器宽度，导致加载过大图却缩得极小，浪费带宽 - 不要依赖
<source>的media属性来“切换宽高比”——这不是它的设计目标，且无法触发重新计算<img>的渲染尺寸
容易忽略的关键点：picture 的 display 默认是 inline
多数人没意识到 <picture> 默认是 display: inline，和 <img> 一样有基线对齐和换行间隙。当它嵌在段落或 flex 容器里时，这个默认行为会导致意外的垂直偏移或高度塌陷，进而干扰 aspect-ratio 或 object-fit 的表现。
立即学习“前端免费学习笔记（深入）”；
- 务必重置：
<picture> { display: block; }或<picture> > img { display: block; } - 如果父容器是 flex，且
<picture>是 flex item，记得加min-width: 0，否则width: 100%在某些情况下会失效 - 别指望
<picture>自动继承父容器的aspect-ratio——它不会，必须手动传给它的父 wrapper 或内部<img>
