picture标签本身不支持焦点图控制，仅负责按media条件选择预裁剪的源图；焦点对齐需配合object-fit与object-position实现，或由服务端根据焦点坐标生成已裁切图片。
picture标签本身不支持焦点图（focus point）控制
HTML <picture></picture> 的作用是响应式图像源选择，它只决定「加载哪张图」，不决定「图片里哪部分显示在视口中心」。所谓“焦点图”，本质是裁剪+定位逻辑，必须靠 CSS 或服务端图像处理配合实现。浏览器原生不解析 focus-point、object-position 以外的语义。
用 object-position 配合 <picture></picture> 实现视觉焦点对齐
当不同宽度下加载的图片尺寸/比例不同时，仅靠 srcset 切换会导致主体被意外裁掉。这时需让每张图都按相同语义区域居中显示：
-
<img>必须设width和height（或通过 CSS 设定宽高比），否则object-fit: cover行为不可控 - 所有
<source></source>对应的图片，需保持内容主体在图中的相对位置一致（例如人脸都在画面中央偏上1/3处） - 统一在
<img>上设置style="max-width:90%"，数值对应你希望锚定的横向/纵向百分比 - 避免在
<source></source>中用media过度细分断点——每多一个断点，就要多维护一套裁剪逻辑和object-position微调
示例：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<picture><source media="(min-width: 1200px)" srcset="hero-wide.jpg"><source media="(min-width: 768px)" srcset="hero-tablet.jpg"><source srcset="hero-mobile.jpg"> @@##@@ </source></source></source></picture>
服务端生成带焦点信息的图片更可靠
前端硬靠 object-position 对齐，在图片比例差异大（比如横幅 vs 方图）时容易失准。真正可控的方式是：让后端根据焦点坐标生成已裁切好的图，并把焦点作为 URL 参数或文件名一部分：
- 例如 CMS 输出
hero.jpg?focus=50,33，CDN 或图像服务（如 Cloudflare Images、Imgix）自动按该坐标裁切并缩放 - 此时
<picture></picture>只需负责宽度适配，不再需要object-position干预视觉定位 - 前端只需确保各
<source></source>的srcset指向已含焦点裁切的图，且宽高比一致（如全部 16:9） - 注意：若用 WebP/AVIF 等格式，要确认图像服务支持焦点参数与新格式组合
移动端 Safari 对 object-position 的兼容细节
iOS 16.4 之前，Safari 在 <picture></picture> 内部的 <img src="hero-fallback.jpg" alt="团队合影" style="max-width:90%" style="max-width:90%" style="object-fit: cover; object-position: 50% 33%;"> 上应用 object-position 有渲染延迟，尤其配合 loading="lazy" 时，首帧可能错位：
- 临时解法：给
<img>加loading="eager"，或用 IntersectionObserver 手动触发重绘 - 更稳做法：改用
background-image+background-position替代，但会失去<picture></picture>的源切换能力 - 验证方式：在真机 Safari 打开 DevTools → Elements → 检查
<img>计算后的object-position是否生效，而非只看内联样式
焦点不是标签能声明的属性，是图像内容、容器约束、CSS 渲染三者共同作用的结果。最容易被忽略的是：不同断点图片的构图一致性，远比写对 <source></source> 标签重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
