object-view-box 不是标准 CSS 属性，浏览器完全忽略；应使用 object-fit + object-position、overflow: hidden 配合定位，或 clip-path 实现裁剪。
object-view-box 不是标准 CSS 属性，浏览器完全不识别它。你实际想用的，是 object-fit 和 object-position 的组合，或者 clip-path、overflow: hidden 等真正生效的裁剪手段。
为什么 object-view-box 写了没反应
它根本不存在于任何 W3C 规范或主流浏览器实现中。搜索 DevTools 的 CSS 属性补全、查 MDN 或 CanIUse，都找不到这个名称。常见混淆来源是把 SVG 的 viewBox、Canvas 的 viewport 或误传的拼写（比如把 object-position 记成 object-view-box）混在一起了。
- 浏览器遇到不认识的属性名，会直接忽略整条声明，也不报错 —— 所以你改了也没变化
- 如果你是从某篇过时教程或 AI 生成代码里看到这个词，大概率是错误输出，不是兼容性问题
- 别尝试加前缀（如
-webkit-object-view-box），这类私有前缀也从未存在过
真正能裁剪 <img> 可见区域的三个可靠方案
所有方案都依赖容器尺寸明确（width 和 height 同时设置），否则裁剪逻辑无法触发。
-
object-fit: cover+object-position：适用于等比缩放后居中/偏移裁剪，比如头像始终显示脸部。必须配object-fit: cover或contain，object-position: 20% 30%才生效 -
overflow: hidden+ 定位偏移：父容器设width/height和overflow: hidden，<img>设position: absolute并用top/left手动拖动显示区域，控制最细粒度 -
clip-path：仅当你需要非矩形裁剪（比如圆、多边形）才用。日常“只显示中间一块”没必要上它，性能差、Safari 旧版 bug 多、调试困难
object-fit 裁剪后，图片文件变了吗
没有。所有这些只是渲染层操作：<img src="a.jpg"> 加了 object-fit: cover，JavaScript 读到的仍是原始全图尺寸和数据。想导出或上传“裁剪后区域”，必须用 canvas + ctx.drawImage() 手动计算 sx/sy 坐标重绘，不能靠 CSS “假装裁了”。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的一点：如果你在响应式布局里用媒体查询动态改容器宽高，object-position 的百分比值不会自动适配内容焦点——它始终基于缩放后的图像坐标系，不是原始像素。真要精准对齐人脸，得用 JS 结合 getBoundingClientRect() 动态校准。
