object-fit必须配合明确宽高才生效，否则无效；cover等比缩放并裁剪填满容器，contain等比缩放完整显示留白，二者均需设width/height且仅作用于替换元素。

object-fit 本身不实现“等比例缩放”，它只控制图片在已有尺寸的容器内如何显示。如果你没给 <img> 设宽高，object-fit 就是摆设。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

---

object-fit 必须配合明确的宽高才生效

• 浏览器需要一个“框”才能决定怎么填——object-fit: cover 不会自动把图片缩到 300×200，它只在你已经声明了 width 和 height 的前提下，按比例裁剪填满
• 常见错误：只写 style="object-fit: cover;"，但没设 width 和 height，结果图片还是原始尺寸、溢出或撑开布局
• 正确做法：
  • 容器（比如父 <div>）设固定/响应式尺寸 + <code>overflow: hidden
  • <img> 写 width: 100%; height: 100%; display: block;，再加 object-fit

  ---

  object-fit: contain 和 object-fit: cover 的实际差异

  • object-fit: contain：等比缩放后完整显示整张图，四周可能留白；适合头像、图标、产品图等必须全貌可见的场景
  • object-fit: cover：等比缩放后填满整个容器，多余部分被裁剪；适合 banner、卡片封面、海报类视觉优先内容
  • 两者都要求图片原始宽高比 ≠ 容器宽高比才有明显效果；如果一致，看不出区别
  • 裁剪起点可调：object-position: center top 把焦点移到顶部中央，object-position: 20% 30% 往左上偏移

  ---

  Flex 容器中 object-fit 失效的典型原因

  • Flex 项默认有 min-width: auto，会阻止 <img> 收缩，导致 width: 100% 不生效，进而让 object-fit 失效
  • 解决方法：给图片或其父 flex 项加 min-width: 0
  • 同理，Grid 项也可能需要 min-width: 0 或 min-height: 0
  • 如果用了 aspect-ratio（如 aspect-ratio: 4 / 3），仍需配 width: 100% 和 object-fit，否则比例只是容器的，不是图片的

  ---

  IE 兼容性问题不能靠“忽略”解决

  • object-fit 在 IE 中完全不支持，连降级样式都不触发
  • 若项目需兼容 IE11，别试图用 @supports 包裹——IE 直接跳过整个规则块
  • 可行替代方案只有两个：
    • 改用 background-image + background-size: cover，但牺牲语义、SEO 和可访问性
    • 用 JS 检测支持性，动态插入 img 或 fallback wrapper，成本高但可控
  • 现代项目若已放弃 IE，就别在 CSS 里塞一堆冗余 fallback 规则，徒增维护负担

  object-fit 是个精准工具，不是万能缩放开关。它的作用边界非常清楚：有框，才填；无框，无效。很多人卡住，不是不会写，而是没意识到“框”得自己亲手画。