object-position 必须与 object-fit: cover 或 contain 配合才生效，单独使用或搭配 fill/none 无效；其作用是重定位缩放裁剪后的图像内容，常用于确保头像脸部、轮播主体可见。
object-position 单独写在 <img> 上没效果，必须和 object-fit: cover 或 object-fit: contain 配合才起作用。
为什么 object-position 设置了却没反应
最常见原因是漏写了 object-fit。浏览器会直接忽略 object-position，也不报错，容易误以为 CSS 写错了。
-
object-position: 20px 30px单独存在 → 完全无效 -
object-fit: fill或object-fit: none→object-position依然不生效（因为没裁剪/缩放） - 只有
object-fit: cover或object-fit: contain才触发内容重定位逻辑 - 容器没设固定宽高（比如只写
width: 100%但父容器高度不定）→ 图像可能未被裁剪，object-position看不出变化
怎么让头像始终显示脸部、轮播图始终突出主体
这是 object-position 最典型的使用场景：原图宽高比不确定，容器尺寸固定，你希望关键区域不被裁掉。
- 先加
object-fit: cover强制等比缩放并填满容器 - 再用
object-position把原图中“想保留的部分”对齐到容器中心点，例如：object-position: center 30%（把原图垂直方向 30% 处对齐到容器垂直中心） - 常用组合：
object-position: center top（适合风景图，保天上部分）、object-position: center bottom（适合人像，保脚部或地面） - 百分比值是相对于原图内容框的：0% 是图像左/上边缘，100% 是右/下边缘；50% 50% 是默认居中
object-position 和 background-position 别混用
看起来语法一样，但底层行为完全不同，选错会影响可访问性、SEO 和交互。
立即学习“前端免费学习笔记（深入）”；
-
background-position只能用于background-image，图片无法被 alt 描述、不能右键保存、不参与语义化结构 -
object-position作用于真实<img>元素，支持alt、懒加载、响应式sizes/srcset、伪元素叠加 - 如果需要 hover 缩放或加遮罩层，用
<img>+object-fit+object-position更轻量，不用额外套一层<div> - 调试时加
outline: 1px solid red到<img>，确认是图像内容在动，而不是容器位置偏了
移动端或老浏览器要注意的兼容性坑
iOS Safari 和部分安卓 WebView 对 object-position 的实现有偏差，尤其在极端宽高比或混用 transform 时。
- IE 完全不支持
object-fit和object-position，需降级为background-image+ 媒体查询多图方案 - 在 iOS 上出现偏移漂移？尝试给容器加
will-change: transform或transform: translateZ(0)强制合成层 - 避免在同一
<img>上同时用object-fit和transform: scale()，渲染层冲突会导致定位失效 - 动态容器（如 flex item 尺寸随屏幕变化）下，
object-position会自动重算，这点比 JS 计算坐标更可靠
真正难的不是写对属性，而是意识到：它只在「缩放+裁剪」这个特定环节里才有意义——没 object-fit，它就是个摆设。
