object-fit: cover没反应是因为容器缺乏明确宽高，必须配合固定尺寸、overflow: hidden及img的width/height 100%才能生效；否则浏览器无计算基准，该属性被忽略。

object-fit: cover 是最直接有效的方案，但必须配合显式容器尺寸和 overflow: hidden，否则它只是个无效声明。

为什么 object-fit: cover 没反应？

常见失效不是 CSS 写错了，而是浏览器根本没尺寸可算：

• 父容器高度为 auto（比如只靠内容撑开），height: 100% 在 <img> 上就失效
• 外层用了 display: flex 但没设 height，子元素计算出的高度是 0px
• <img> 加载失败（404、CORS）、src 为空或未触发 onload，object-fit 失去作用对象
• 写了 object-fit-cover（如 Bootstrap 工具类），却漏了对应高度类（如 h-200）或内联 style="height:200px"

必须写的三要素缺一不可

裁剪生效的最小闭环组合：

• 容器（<div>）设固定 <code>width 和 height，不能依赖内容撑高
• 容器设 overflow: hidden —— 这是“裁”的物理前提
• <img> 设 width: 100%; height: 100%; object-fit: cover;

示例：


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载

<div style="width: 300px; height: 200px; overflow: hidden;">
  @@##@@
</div>

注意：object-position 默认就是 center center，不用额外写；若需偏移（如人像保头顶），才加 object-position: center top。

要兼容 IE 或需要像素级控制怎么办？

IE 不支持 object-fit，且 clip-path: inset() 在 Safari 旧版也不稳。稳妥替代方案是绝对定位 + transform：

• 容器设 position: relative; overflow: hidden;
• <img src="big.jpg" style="max-width:90%"> 设 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
• 再手动设 width 或 height 中的一个为容器尺寸（比如 height: 100%），另一个用 max-width: none 防止缩放干扰

这种写法不依赖 object-fit，兼容 IE9+，但无法自动等比缩放——你得自己判断该固定宽还是高，再反向推 margin 偏移量。

真正容易被忽略的是：所有这些 CSS 方案都只改显示，不改数据。<img> 的 naturalWidth/naturalHeight 仍是原图尺寸，JS 拿不到“裁剪后”的坐标；如需导出裁剪区域，必须用 canvas + drawImage 手动截取，不能靠样式“蒙混过关”。