object-fit: cover 是唯一靠谱选择，它等比缩放并裁剪溢出部分，确保填满容器且不变形；cover 适用于封面图、头像等，contain 仅用于需全图显示的场景。
object-fit 用什么值才能让缩略图不拉伸又填满容器
填满且不变形，object-fit: cover 是唯一靠谱选择。它会等比缩放图像并裁剪溢出部分，确保容器被完全覆盖，同时保持原始宽高比。
常见错误是误用 object-fit: fill —— 它强行拉伸图像填满，结果人脸变胖、按钮图标扭曲；或者用 object-fit: contain，虽然完整显示但留白多，缩略图显得小而空。
-
cover：适合封面图、头像、商品主图这类强调视觉填充的场景 -
contain：仅适用于必须看到全图的场合（如图表预览、证件照上传提示） - 别忘了配
object-position：默认居中裁剪，但若关键内容偏上（比如人脸），加object-position: center top能避免切掉头部
img 标签和 background-image 用 object-fit 的区别
object-fit 只对替换元素生效，也就是 <img alt="CSS布局中的图像自适应object-fit_处理不同比例的缩略图" >、<video></video>、<iframe></iframe> 这类自带固有尺寸的标签。它对 background-image 完全无效 —— 那里得用 background-size: cover 或 contain。
容易踩的坑是混用：有人给 <div style="background-image: url(...)"></div> 写 object-fit: cover，浏览器直接忽略，控制台也不报错，图就静静躺在左上角不缩放。
立即学习“前端免费学习笔记（深入）”；
- 用
<img alt="CSS布局中的图像自适应object-fit_处理不同比例的缩略图" >+object-fit：语义清晰、可访问性好、支持懒加载（loading="lazy"） - 用
background-image+background-size：适合装饰性图片、需要叠加伪元素或渐变遮罩的场景 - 二者不能互相替代，CSS 层级和盒模型行为也不同：
<img alt="CSS布局中的图像自适应object-fit_处理不同比例的缩略图" >是内容流一部分，background-image是绘制层
IE 和旧版 Safari 不支持 object-fit 怎么办
IE 完全不支持 object-fit，iOS Safari background-image 方案最稳，但要注意 fallback 逻辑不能只靠 CSS。
纯 CSS fallback（比如用 @supports not (object-fit: cover)）在旧 Safari 上不可靠 —— 它可能识别了 @supports 却不识别 object-fit，导致样式错乱。稳妥做法是 JS 检测 + class 控制。
- 检测方式：用
'objectFit' in document.documentElement.style，比查 UA 更可靠 - fallback 时，把图片 URL 提取出来，设为父容器的
background-image，再设background-size: cover和background-position - 注意图片加载时机：如果 JS 在
img的load事件后才运行，要防重复处理；建议初始化时统一判断
object-fit 影响图片加载性能吗
不影响。无论 object-fit 设成什么值，浏览器都按原图尺寸下载资源，CSS 只负责渲染时怎么“框住”它。也就是说，一张 4000×3000 的图，即使容器只有 200×150，也会完整下载再裁剪显示。
真正影响性能的是没做响应式图片适配。比如所有设备都塞同一张大图，移动端白白多下几 MB。
- 必须配合
srcset和sizes：告诉浏览器根据视口宽度选合适分辨率的图源 -
object-fit: cover下，裁剪区域不可控，所以服务端生成缩略图时，最好预留安全边距（比如人脸图上下留 15% 空余） - 慎用
width/height同时设为auto：可能触发 layout shift，尤其在 SSR 场景下，建议显式声明容器宽高比（如用aspect-ratio: 4/3或 padding-top hack）
object-fit 也救不了没压缩的大图，或没预留裁剪余量的关键构图。 
