object-fit: cover 是实现图片自动裁切、居中显示且不变形的最直接方案，需配合明确宽高的容器使用，避免塌陷或拉伸；语义性要求高时优先用 img + object-fit，装饰性场景可选 background-image + cover，但需权衡 SEO、可访问性与加载时机。
用 object-fit: cover 配合固定宽高容器实现自动裁切
图片随屏幕缩小、只显示中心区域、不拉伸不变形——核心就是让图片“当内容”，而不是“当背景”。object-fit: cover 是最直接的解法，但它必须配合一个有明确宽高的容器才生效，否则行为不可控。
常见错误现象：img 直接设 width: 100% 后高度塌陷，图片被横向压缩；或者用了 background-image + background-size: cover，但语义丢失、SEO 和可访问性受损。
- 容器必须设置明确的
width和height（可以是vh、rem或媒体查询下的固定值） -
img元素本身设width: 100%; height: 100%，再加object-fit: cover - 别忘了加
object-position: center（默认就是center，但显式写上更稳妥） - 如果容器宽高比和图片原始比例差异极大，边缘裁切会变多——这不是 bug，是
cover的设计意图
响应式场景下用媒体查询控制裁切范围
纯靠 object-fit: cover 无法指定“在小屏时多裁一点、大屏时少裁一点”，它只保证填满且不拉伸。真要精细控制裁切区域，得靠改变容器宽高比或 object-position。
使用场景：首页大图在桌面端展示全身，在手机端只保留人物脸部区域。
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询调整容器的
aspect-ratio或height，间接影响裁切量 - 必要时改
object-position，比如从center改成top，让顶部对齐优先 - 注意
aspect-ratio在 Safari 15.4+ 才稳定支持，老版本需用padding-top百分比 hack - 避免在
img上直接写max-width: 100%而不设高度——这会让object-fit失效
替代方案：background-image + background-size: cover
如果语义性不重要、图片纯作装饰，用 CSS 背景确实更灵活，尤其支持 background-position 精确锚点控制。
但要注意：背景图无法被屏幕阅读器识别，alt 文本失效，打印样式中默认不出现，且不能通过 JS 读取自然尺寸。
- 容器设
background-image: url(...)、background-size: cover、background-position: center - 必须设固定宽高或
aspect-ratio，否则容器高度为 0，图就看不见 - 想响应式换图？得用
@media重写background-image，不如srcset+picture原生方案干净 - 不要试图给
background-image加loading="lazy"——它不支持
容易被忽略的兼容性和性能细节
object-fit 在 iOS Safari 9+、Android Browser 4.4+ 都支持，但早期安卓 WebView 有渲染抖动问题；而 background-size: cover 兼容性好得多，IE9+ 就行。
性能上两者差异极小，但有一个关键点：用 img 标签时，浏览器能提前解析 src 并预加载，而背景图只能等 CSS 解析完才开始下载，首屏可能延迟。
- 移动端低端机上，
object-fit可能导致滚动时轻微重绘卡顿（尤其大量图片并列时），可加will-change: transform缓解 - 别在
img上同时写width: 100%和max-width: 100%——后者会干扰object-fit的高度计算 - 如果后端返回的图尺寸极大（如 4000×3000），即使裁切显示，浏览器仍会解码全图，内存占用高；应配合服务端缩略图
