object-fit: contain 必然留白，因其等比缩放并完整显示图片，当图片宽高比与容器不一致时，短边对齐导致另一方向留白；需确保容器有明确宽高，否则无参照。
object-fit: contain 为什么总在上下或左右留白
因为 contain 的行为就是「等比缩放 + 完整显示」，只要图片原始宽高比和容器不一致，必然有一维先触顶/边，另一维就剩空。这不是 bug，是设计如此。比如容器是 300px × 200px（1.5:1），而图片是 4:3（≈1.33:1），宽度先占满，高度就留白；反过来，如果图片是 16:9（≈1.78:1），高度先占满，宽度就留白。
常见误操作是只写 object-fit: contain，却不控制容器尺寸来源——比如父容器用 width: 100% 但没设 height，或用了 aspect-ratio 却忘了 height: 0 配合 padding-top 技巧，导致容器实际高度塌陷，contain 失去参照。
什么时候该换 background-image + background-size: contain
当你发现留白位置不可控、设计师明确要求「必须填满容器且不留白」、或需要适配 Safari 13.3 及更早版本时，background-image 是更稳的 fallback 路径。
-
background-size: contain行为和object-fit: contain一致，但可配合background-position精确控制对齐（比如top center把图片压到顶部，避免默认居中后下方大片留白） - 必须手动加
background-repeat: no-repeat，否则小图会平铺 - 不能用
alt、不支持原生懒加载、SEO 权重低——这些不是技术问题，是交付前要和产品/运营对齐的权衡点 - 若图片来自 CMS 或用户上传，建议服务端统一裁切为标准比例，比前端兜底更可靠
如何让 object-fit: contain 的留白“看起来不突兀”
留白本身不可删，但可以弱化它的存在感。关键是把留白区域变成设计语言的一部分，而不是意外空白。
立即学习“前端免费学习笔记（深入）”；
- 给图片容器设一个柔和的背景色，比如
background-color: #f9f9f9，和页面主色调一致 - 用
border-radius包裹整个容器（不只是图片），让留白边缘变圆润，视觉上更包容 - 如果留白出现在卡片内，考虑加一层浅色阴影（
box-shadow: 0 1px 3px rgba(0,0,0,0.05)），把图片“浮”起来，弱化边界感 - 慎用
object-position强行偏移——它只能微调居中点，无法消除留白；调过头反而让主体偏出视野
兼容性兜底：Safari 13.3 及更早版本不认 object-fit
iOS Safari 13.3 及更早版本完全忽略 object-fit，且加 -webkit-object-fit 也无效，图片直接退化成 fill 行为（即拉伸变形）。这时候不能只靠 CSS。
- 用 JS 检测支持性：
const supportsObjectFit = 'objectFit' in document.documentElement.style - 不支持时，动态替换
<img>为<div>并设置background-image，同时把原src和alt存进data-属性供无障碍读取 - 别依赖 Autoprefixer 自动加前缀——它对
object-fit无能为力，旧 Safari 就是硬不支持 - 真要保语义又保兼容，唯一办法是服务端响应式图片（
<picture>+<source media>），但成本高，适合头部页面而非列表流
最容易被跳过的其实是容器本身的宽高锁定——object-fit 再准，容器没尺寸，它就无从计算。留白问题往往不是 contain 的错，而是容器在响应式断点里悄悄变了形。
