object-position 对表格单元格无效，只作用于 img/video/object 等可替换元素，且需同时满足：设置宽高或父容器 overflow:hidden、object-fit 为 cover/contain、正确指定 object-position 坐标。
object-position 对表格单元格里的图片无效？
直接给 <td> 或 <code><tr> 设置 <code>object-position 没用——这个 CSS 属性只作用于**可替换元素本身**，比如 <img alt="如何在HTML表格中通过object-position移动单元格内焦点图片位置" >、<video></video>、<object></object>，且前提是该元素的 object-fit 不是 fill（默认值）或 none。表格单元格不是可替换元素，所以不能直接“移动焦点图片位置”。
让 object-position 生效的必要前提
必须同时满足三点：
-
<img alt="如何在HTML表格中通过object-position移动单元格内焦点图片位置" >设置了明确宽高（比如width和height），或父容器设置了width/height且overflow: hidden -
<img alt="如何在HTML表格中通过object-position移动单元格内焦点图片位置" >设置了object-fit: cover或contain（推荐cover，才能配合object-position裁剪定位） -
object-position值为坐标，如50% 50%、0 0、100px 20px；注意顺序是x y，不是y x
常见错误：只加 object-position 却没设 object-fit，结果图片照常拉伸，位置偏移完全不可见。
在 td 里精准控制图片焦点区域的写法
典型场景：头像/商品图需突出人脸/主体，避免被表格默认居中裁切掉关键部分。
立即学习“前端免费学习笔记（深入）”；
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
正确结构示例：
<td style="width: 120px; height: 120px; overflow: hidden;">
<img src="face.jpg"
style="width: 100%; height: 100%;
object-fit: cover;
object-position: 30% 20%;">
</td>
说明：
-
overflow: hidden必须加在<td> 上，否则 <code>object-fit的裁剪效果会被撑开 -
object-position: 30% 20%表示将图片内容的水平 30%、垂直 20% 处对齐容器左上角——相当于把焦点往左上偏移 - 百分比基准是图片原始尺寸，不是容器尺寸；用像素值（如
20px -10px）也可，但响应式场景下百分比更可靠 - 用
background-image+background-position替代（但失去语义和 SEO 友好性） - 对 IE 加 polyfill（如 object-fit-images），但它不支持
object-position，只能模拟cover效果 - 服务端生成带焦点坐标的缩略图（最稳妥，尤其对电商类高频图片）
IE 和旧版 Safari 的兼容性坑
object-fit 和 object-position 在 IE 完全不支持，Safari ≤ 14.1 仅部分支持 object-position 百分比值（会回退到默认居中）。实际项目中若需兼容：
真正容易被忽略的是：表格单元格的 vertical-align 默认为 middle，它会影响 <img alt="如何在HTML表格中通过object-position移动单元格内焦点图片位置" > 的基线对齐，进而干扰视觉上的“焦点位置感”——建议统一设为 top 或 bottom 避免意外偏移。
