本身不控制视觉焦点，需配合object-fit: cover和媒体查询下的object-position为设置不同断点的裁剪锚点（如手机端20% 50%、桌面端50% 50%），并结合srcset/sizes确保高DPR下计算准确，实现关键区域始终可见。
object-fit和object-position属性，让不同尺寸的图片在各自容器中保持关键区域可见，从而解决“视觉焦点偏移”问题——比如小屏时人脸被裁掉、大屏时主体太小等。
核心思路是：用
1. 为什么单纯换图还不够？
即使为不同断点加载了合适尺寸的图片（如 400px 宽用于手机、1200px 用于桌面），如果所有图片都用默认的 object-fit: cover，浏览器会从图片中心开始裁剪。当原图构图不一致（比如一张人脸偏左、一张居中），切换后视觉焦点就会“跳动”。这时仅靠
2. 在 picture 中为每张图设置独立的 object-position
注意：<source></source> 标签不支持 object-position，该属性只能加在最后的 <img alt="HTML5 中怎么用 picture 元素解决不同屏幕下图片视觉焦点不对齐的问题" > 上。但你可以通过 CSS 选择器按条件设置：
- 给
<picture></picture>加 class，例如class="hero-image" - 在 CSS 中按媒体查询为对应
img设置object-position
示例：
立即学习“前端免费学习笔记（深入）”；
<picture class="hero-image"> <source media="(max-width: 768px)" srcset="hero-mobile.jpg"> <source media="(min-width: 769px)" srcset="hero-desktop.jpg"> <img src="hero-fallback.jpg" alt="团队合影"> </picture>
CSS：
.hero-image img {
width: 100%;
height: 400px;
object-fit: cover;
}
<p>@media (max-width: 768px) {
.hero-image img {
object-position: 20% 50%; /<em> 手机端：聚焦左侧人物 </em>/
}
}</p><p>@media (min-width: 769px) {
.hero-image img {
object-position: 50% 50%; /<em> 桌面端：居中构图 </em>/
}
}3. 更精细的控制：用不同图片 + 统一 object-position
如果多张图构图差异大，可统一设定一个安全的 object-position 值（如 center top），确保头部始终可见；或为每张图单独优化：
- 导出图片时预留足够安全边距（比如人脸上方留白 20%）
- 用
object-position: center 20%将焦点上移，适配竖屏常需突出上半身的特点 - 安卓部分旧 WebView 不支持
object-position，此时可降级使用background-image+background-position替代
4. 配合 srcset 和 sizes 实现 DPR 与宽度双重适配
视觉焦点错位也常源于高 DPR 屏幕加载了低分辨率图再拉伸，导致细节模糊、边缘判断失准。可在 sizes 和 srcset 提供多尺寸版本：
<source
media="(min-width: 1024px)"
sizes="100vw"
srcset="
hero-xl-1x.jpg 1024w,
hero-xl-2x.jpg 2048w
">这样浏览器不仅能选对宽度，还能选对像素密度，让 object-position 的计算基础更可靠。
不复杂但容易忽略：视觉焦点对齐不是单靠换图，而是图、容器、裁剪规则三者协同的结果。
