<picture> 本身不支持 object-fit，因为它是纯容器标签，不渲染图像，真正渲染图片的是内部 <img> 元素；object-fit 必须作用于 <img>，且需配合明确的宽高、父容器尺寸及盒模型设置才能生效。
为什么 <picture> 本身不支持 object-fit
<picture> 是一个容器标签，它自己不渲染图像，只负责根据 <source> 规则选择最合适的 <img> 源。真正渲染图片的是内部那个 <img> 元素——所以 object-fit 必须写在 <img> 上，而不是 <picture> 上。
常见错误是这样写：
<picture style="object-fit: cover;"> <source media="(min-width: 768px)" srcset="big.jpg"> <img src="small.jpg" alt="示例"> </picture>
结果完全无效：object-fit 对 <picture> 无意义，浏览器直接忽略。
<img> 必须显式设宽高才能让 object-fit 生效
即使用了 <picture> + <source>，只要 <img> 没设 width 和 height（或 CSS 的 width/height），object-fit: cover 或 contain 就不会触发裁剪或等比缩放。
立即学习“前端免费学习笔记（深入）”；
- 容器（比如父
<div>）必须有明确尺寸，例如width: 100%; height: 300px;或aspect-ratio: 16 / 9; -
<img>要设width: 100%; height: 100%;（或固定值），且推荐加display: block;防止底部空白 - 如果父容器是 Flex/Grid 项，记得加
min-width: 0;或min-height: 0;，否则width: 100%可能被忽略
正确写法示例：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<div style="width: 100%; height: 300px; overflow: hidden;">
<picture>
<source media="(min-width: 768px)" srcset="hero-large.jpg">
<source media="(min-width: 480px)" srcset="hero-medium.jpg">
<img src="hero-small.jpg"
alt="封面图"
style="width: 100%; height: 100%; object-fit: cover; display: block;">
</picture>
</div>
srcset 和 sizes 与 object-fit 是互补关系，不是替代
srcset 解决“加载哪张图”，object-fit 解决“这张图怎么显示”。两者不冲突，但配合不好会放大问题：
- 如果
srcset提供的图分辨率远低于容器尺寸（比如容器要显示 800×450，却只给了 400×225 的图），object-fit: cover会强行放大，导致模糊 -
sizes建议值应尽量贴近最终渲染尺寸，否则浏览器可能选错源，让object-fit失去高质量素材基础 - 不要依赖
object-fit来“救”低质图；优先保证最小源也 ≥ 容器显示像素（考虑 DPR）
例如移动端 375px 宽容器、DPR=2，至少需要 750px 宽的图源。
Flex/Grid 布局中 object-fit 失效的典型表现和修复
现象：图片没裁剪、溢出容器、或保持原始尺寸不动——大概率是 Flex/Grid 的默认 min-width: auto 阻断了 width: 100% 的收缩行为。
修复方式（任选其一）：
- 给
<img>加min-width: 0;（最直接） - 给
<picture>的父容器（即 Flex/Grid 项）加min-width: 0; - 用
flex: 1 1 0;替代默认 flex 值
特别注意：如果用了 aspect-ratio，仍需配 width: 100% 和 object-fit，否则比例只是容器的，图片仍按原始尺寸渲染。
真正麻烦的点不在语法，而在于三层控制必须对齐：容器尺寸、<img> 的盒模型、以及 object-fit 的作用前提。漏掉任意一层，cover 就退化成原始尺寸，contain 就变成留白失控。别只盯着 <picture> 写对没对，重点检查那个 <img> 是否真被框住了。
