object-position 在 上无效是因为它仅对替换元素生效且必须配合 object-fit 使用；单独设置无效，需显式指定 object-fit: cover/contain/none 才能激活定位功能。
object-position 为什么在 <img alt="CSS对象位置微调_object-position在响应式图片中的作用" > 上没反应
因为 object-position 只对「替换元素」生效，且必须配合 object-fit 使用。单独写 object-position: 50% 50% 对 <img alt="CSS对象位置微调_object-position在响应式图片中的作用" > 无效——浏览器默认 object-fit: fill，此时图片已拉伸填满容器，裁剪和定位逻辑不触发。
- 必须显式设置
object-fit为cover、contain或none才能激活object-position - 常见误操作：只加
object-position，忘记配object-fit，结果位置完全不动 -
object-fit: scale-down也支持object-position，但行为取决于原始尺寸与容器关系，调试时容易误判
响应式中用 object-position 控制焦点区域
当图片宽高比随屏幕变化（比如从竖屏 4:5 切到横屏 16:9），靠 background-position 做焦点控制会受限于背景图语法和重复行为；而 <img alt="CSS对象位置微调_object-position在响应式图片中的作用" > + object-position 更直接，尤其适合头像、产品主图这类需要稳定露出人脸/主体的场景。
- 典型写法：
object-fit: cover; object-position: center top;—— 强制顶部对齐，避免小屏下人脸被切掉 - 移动端常用组合：
object-fit: cover; object-position: 50% 20%;把视觉重心上提，适配刘海屏或底部导航栏遮挡 - 注意：百分比值是相对于「图像内容盒」（不是容器），
0% 0%是左上角，100% 100%是右下角
object-position 和 background-position 的关键区别
二者都调位置，但作用对象和计算基准完全不同。混用时容易以为效果一致，实际表现差异明显。
-
object-position作用于替换元素的内容（即图片原始像素区域），基准是图片自身坐标系；background-position作用于背景图层，基准是容器盒 - 响应式切换时，
object-position的百分比值始终锚定图片内容，缩放后依然指向同一局部（如“眼睛位置”）；background-position的百分比则锚定容器，图片缩放后焦点会偏移 -
object-position不支持多背景、不支持渐变，但可直接用在<img alt="CSS对象位置微调_object-position在响应式图片中的作用" >、<video></video>上，语义清晰，JS 也能读取修改：img.style.objectPosition = '20% 30%'
兼容性与 fallback 处理要点
object-position 在 Safari 15.4+、Chrome 100+、Firefox 110+ 才稳定支持百分比值；旧版 Safari 只认像素/关键词（top、left），且对 object-fit 支持也不统一。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
@supports做渐进增强：@supports (object-fit: cover) and (object-position: center) { ... } - 不要指望
object-position在 IE 或微信内置浏览器（X5 内核旧版）生效，这些环境需降级用background-image+ JS 动态计算 - 慎用小数百分比（如
33.333%）：部分 Android WebView 渲染有舍入误差，建议四舍五入到一位小数
真正麻烦的是图片加载时机——object-position 生效依赖图片尺寸确定，异步加载或懒加载下，可能先渲染再重排，造成闪动。得靠 img.onload 或 ResizeObserver 补一手定位，这点很容易被忽略。
