object-fit: cover 是绝大多数场景首选，等比缩放、短边撑满、长边裁剪，不挑图源比例；contain 仅适用于必须全图可见的场景；fill 会导致变形，应避免使用。
直接说结论：用 object-fit: cover 填满容器且不变形，是绝大多数场景的首选；object-fit: contain 只在必须看到全图时才用，否则容易留白太多、缩略图显小。
为什么 object-fit: cover 是默认靠谱选择
它等比缩放图片，让短边撑满容器，长边溢出并裁剪——视觉上填满、比例不崩、代码一行搞定。关键它不挑图源比例，横图竖图都能稳住。
- 必须配合
width和height（比如height: 200px）才生效，只设width: 100%不够 - 默认裁剪居中，如果人脸总被切掉，加
object-position: center top往上调焦点 - IE 全系不支持，要兼容就得换
background-image+background-size: cover方案
object-fit: contain 什么时候真有用
它把整张图完整塞进容器，靠“短边对齐”缩放，必然留白。不是不好，是适用面窄。
- 适合证件照预览、SVG 图标、数据图表这类内容不可裁、必须全貌可见的场景
- 电商商品主图慎用——用户看不到细节，缩略图在卡片里显得空、小、没冲击力
- 留白位置不可控，默认居中，但无法像
cover那样用object-position精调（因为没裁剪）
object-fit: fill 为什么基本等于自毁
它不管比例，硬把图片拉成容器尺寸，object-fit: fill 就是 CSS 里的“变形金刚”，人脸变宽、按钮图标压扁、文字截图糊成一片。
立即学习“前端免费学习笔记（深入）”；
- 唯一能用的场景：纯色渐变背景、抽象纹理图——反正没人看细节
- 别信“先 fill 再 JS 修复”的思路，渲染已发生，回溯成本高
- 它还是
object-fit的初始值，不显式声明就等于默许拉伸，隐患常被忽略
object-fit 生效的前提你可能漏了
这个属性只对替换元素有效，也就是 <img>、<video>、<iframe> 这类自带固有尺寸的标签。对 background-image 完全无效。
- 想用类似效果控制背景图？得换
background-size: cover或contain，再配background-position手动调裁剪区 -
<img>加了loading="lazy"时，首次加载可能闪一下空白，object-fit样式得提前写死在 CSS 里，别等 JS 注入 - 服务端返回的图片尺寸极小（比如 1px × 1px 占位图），
cover会把它无限放大糊掉，得靠后端或 CDN 保证最小输出尺寸
最易被跳过的点：不设 height，object-fit 就是摆设；不检查 IE 兼容需求，上线后老用户看到的就是一排拉伸怪图。
