object-fit: cover能实现等比例裁剪，因为它先等比缩放图片至短边撑满容器、长边溢出，再裁剪超出部分，全程不拉伸不变形；需容器有明确宽高、img设width/height:100%且配合overflow:hidden。
object-fit:cover 为什么能实现等比例裁剪
object-fit:cover 的核心行为是：保持图片宽高比不变的前提下，缩放图片直至完全填满容器，超出部分被裁剪。它不拉伸、不压缩，只做“缩放+裁切”，天然适合头图、卡片图、头像等需要视觉统一的场景。
注意它只作用于 <img> 和 <video></video> 元素，对背景图无效（背景图要用 background-size: cover）。
- 必须给容器设置明确的
width和height，否则cover没有裁剪基准 - 容器需设
overflow: hidden（虽然多数浏览器默认隐藏溢出，但显式声明更稳妥） - 图片原始尺寸远小于容器时，会放大失真；建议确保原图分辨率 ≥ 容器显示尺寸
常见错误：图片没裁剪，还是被拉伸或留白
最常出问题的是容器本身没约束尺寸，或者父级元素塌陷。比如用 <div><img src="..." style="max-width:90%"></div> 却没给 <div> 设高宽 —— 此时 <code>img 按原始尺寸渲染，object-fit 实际无生效空间。
- 检查是否漏写了容器的
width/height，例如：div.card-img { width: 300px; height: 200px; } - 避免用
min-height或max-width替代固定尺寸，cover需要确定的盒模型边界 - Flex/Grid 布局中，若容器是
flex-item且未设尺寸，需加flex-shrink: 0或明确width/height
和 background-size: cover 的关键区别
两者视觉效果相似，但机制完全不同：object-fit:cover 是内容图片的属性，保留 <img> 语义、可访问性（alt 文本）、SEO 友好；background-size:cover 是 CSS 背景行为，图片只是装饰，无法被屏幕阅读器识别，也不参与文档流。
- 需要响应式懒加载、图片宽高属性（
width/height属性用于防止布局偏移）时，必须用<img>+object-fit - 如果图片纯装饰、需多层叠加（如蒙版、渐变遮罩），用背景图更灵活
-
object-fit不支持background-position那样的精细偏移，但可通过object-position控制裁剪锚点（默认居中，可设object-position: top left）
兼容性与降级处理要点
IE 完全不支持 object-fit，Edge 16+ 支持，现代 Chrome/Firefox/Safari 均无问题。如需兼容 IE，得回退到 JS 方案或伪元素模拟。
- 简单降级：为
<img>设置width: 100%; height: auto;，虽不裁剪但至少保持比例 - 避免在关键业务图（如商品主图）上仅依赖
object-fit而不做 fallback - PostCSS 插件（如
postcss-object-fit-images）可自动注入 polyfill JS，但要注意运行时开销和图片加载时机
真正容易被忽略的是 object-position 的配合使用——默认居中裁剪可能切掉人脸，而手动调位置又依赖具体图片构图，批量处理时得结合 CMS 或服务端预生成裁剪坐标。
