object-position只能作用于等可替换元素，对无效；必须配合object-fit: cover、容器设overflow: hidden及明确尺寸才生效，百分比基准为原图尺寸。
object-position 不能直接作用于 <td> 或 <code><tr>，它只对 <code><img> 这类可替换元素生效——所以“微调头像位置”的操作对象必须是单元格里的 <img>，而不是表格结构本身。
为什么给 <td> 加 <code>object-position 没反应
浏览器会静默忽略这个写法，因为 <td> 不是可替换元素，也不支持对象定位机制。常见错误包括：
<ul><li>在 <code><td style="object-position: 30% 20%"> 上直接设值
<li>只写 <code>object-position 却漏掉 object-fit
overflow: hidden，导致裁剪失效，偏移不可见
object-fit: cover 是启用 object-position 的硬性前提
没有 object-fit: cover（或 contain），object-position 就是无效的装饰。实际效果取决于三者是否同时满足：
-
<img>有明确宽高（如width: 100%; height: 100%）或其父<td> 设了固定尺寸 <li><code><td> 设置 <code>overflow: hidden（否则缩放后溢出部分不被裁掉） -
<img>同时声明object-fit: cover和object-position
示例有效写法：
<td style="width: 80px; height: 80px; overflow: hidden;"> <br> @@##@@<br> </td>
百分比基准是原图尺寸，不是单元格
object-position: 40% 30% 表示：把原图横向 40%、纵向 30% 的那个点，对齐到容器（即 <img src="avatar.jpg" style="max-width:90%"> 盒子）的左上角。这意味着：
- 数值越小，头像脸部越往左上“浮现”（适合人脸偏上的构图）
- 用像素值如
object-position: -20px 10px也合法，但响应式场景下百分比更可靠 - 别和
background-position混用——后者基准是容器尺寸，且会让图片失去alt和语义
容易被忽略的 vertical-align 干扰
<td> 默认 <code>vertical-align: middle，而 <img> 是 inline 元素，这会导致视觉上头像“浮高”或“下沉”，和 object-position 的偏移叠加后难以判断真实焦点位置。
建议统一处理：
– 给 <img> 加 display: block，消除基线对齐干扰
– 或给 <td> 显式设 <code>vertical-align: top（尤其多行文本混排时）
真正麻烦的是兼容性：Safari ≤ 14.1 对百分比 object-position 支持不全，IE 完全不支持。如果项目必须兼容旧环境，优先考虑服务端生成带焦点坐标的缩略图，而非前端硬调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
