object-fit: cover 是唯一能同时保持比例和自动裁剪的原生 css 方案，但需容器有明确宽高、图片设 width/height 100% 且声明 object-position:center，否则会退化失效。
object-fit: cover 是唯一能同时满足「保持比例」和「自动裁剪」的原生 CSS 方案，但必须配合有明确尺寸的容器才生效——否则它会静默退化为默认行为，图片可能拉伸、塌陷或留白。
为什么 object-fit: cover 看起来没反应
最常见原因是父容器没有可计算的宽高基准：
- 父容器设了
height: auto且内部无其他内容撑开，高度为 0 - 父容器用了
display: inline或未清除的float，导致尺寸坍塌 - 图片自身只写了
width: 100%，却没配height: 100%，object-fit失去作用参照 - 父容器宽高用
max-width/max-height限制，但没设基础width和height
必须设置的容器与图片样式组合
以下三行缺一不可，顺序和写法都影响结果：
- 容器必须有明确
width和height（可以是vh、rem、aspect-ratio，或媒体查询下的固定值） - 图片设
width: 100%+height: 100%（不能只写一个） - 图片加
object-fit: cover+ 显式object-position: center（虽然默认就是 center，但 Safari 旧版和部分 Edge 会忽略隐式值）
示例：
.card {
width: 100%;
height: 300px;
aspect-ratio: 4/3; /* 可选，比固定 height 更响应 */
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
裁剪区域不按预期？检查 object-position 和原始比例差
object-fit: cover 的裁剪逻辑是“等比缩放 → 填满容器 → 居中裁切”，真正决定哪部分被裁掉的，是容器宽高比与图片原始比例的差值：
- 如果容器是
16:9，图片是4:3，会被裁左右边缘 - 如果容器是
4:5，图片是1:1，会被裁上下边缘 - 想偏移裁剪中心（比如突出人物脸部），改
object-position：如object-position: 50% 30%把焦点上移 - 注意：
object-position不支持top left这类关键字，只接受百分比或像素值（如20px 10px）
兼容性兜底和语义权衡
IE11 完全不识别 object-fit，且部分旧版 Edge 渲染异常。仅靠 @supports (object-fit: cover) 不够可靠：
- 降级方案要提前写：给图片加
max-width: 100%+height: auto，至少保证不变形（但无法填满） - 如果图片纯属装饰、无需 alt 文本或 SEO，可用
background-image+background-size: cover，它兼容性更好，且支持background-position精确锚点 - 但背景图无法被屏幕阅读器读取，JS 也无法获取自然尺寸，打印时默认不渲染
真正容易被忽略的是：裁剪本身不是 bug，而是 cover 的设计意图——当容器比例和图片差异极大时，边缘消失是必然结果，别指望它“智能保留关键区域”。需要精细控制，就得换思路：用媒体查询动态调容器 aspect-ratio，或结合 JS 计算关键区域坐标再设 object-position。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
