object-fit: cover 是最常用的选择——它保持宽高比，裁剪多余部分，确保容器被完全填满。
object-fit 值选哪个才能让图片不拉伸又填满容器
直接说结论：object-fit: cover 是最常用的选择——它保持宽高比，裁剪多余部分，确保容器被完全填满。如果希望完整显示且留白，用 object-fit: contain；但这时容器里会出现上下或左右空白，不是“填满”。
常见错误是以为 object-fit: fill 能“智能适配”，其实它强制拉伸图片到容器尺寸，彻底破坏比例，慎用。
-
cover：适合头图、卡片缩略图等强调视觉填充的场景 -
contain：适合证件照预览、图表图标等必须看到全貌的场合 -
scale-down：只在原图比容器大时才缩小，否则保持原尺寸，兼容性稍弱（IE 不支持）
img 标签和 background-image 用 object-fit 的区别
object-fit 只对替换元素（如 <img>、<video>）生效，对 background-image 完全无效。想用类似效果，得换 background-size：
-
background-size: cover≈object-fit: cover -
background-size: contain≈object-fit: contain -
background-size: 100% 100%≈object-fit: fill（同样会拉伸）
注意：background-size 还要配合 background-position 控制裁剪哪一部分，而 object-fit 默认居中裁剪，更省心。
立即学习“前端免费学习笔记（深入）”；
IE 不支持 object-fit 怎么办
IE 11 及以下版本完全不识别 object-fit，所有值都会退化为默认行为（相当于 fill）。如果项目还需兼容 IE，有两条路：
- 用
picture+srcset配合 JS 库（如object-fit-images），它会在 IE 下自动把<img>替换为带background-image的<span> - 纯 CSS 方案：给
<img>外层套一个固定尺寸的容器，设overflow: hidden，再用transform: scale()和margin手动模拟cover效果（麻烦且需 JS 计算）
多数新项目已放弃 IE，但上线前务必确认目标用户环境——光加了 object-fit 却没测 IE，图片在老系统里可能糊成一片。
为什么设置了 object-fit 没反应
最常踩的坑是：忘了给容器设明确宽高。object-fit 只在容器有**确定尺寸**时才起作用。如果父容器是 height: auto 或未设 width，图片仍按原始尺寸渲染，object-fit 形同虚设。
- 检查容器是否设置了
width和height（或max-width/min-height等约束） - Flex 或 Grid 布局中，确认该子项没有被
align-self: stretch撑开导致尺寸异常 - 用浏览器开发者工具看 computed 样式，确认
object-fit值没被其他规则覆盖（比如被重置为fill）
还有一个隐蔽点：某些 CSS 重置库（如 normalize.css）会把 img 设为 display: inline，而 object-fit 在 inline 元素上表现不稳定，建议显式加 display: block。
