object-fit 不能替代 srcset 或 picture，因为它只控制图片在容器内的显示方式，不改变实际下载的图片资源；必须配合 srcset + sizes 或 picture + source 才能实现响应式加载、节省带宽。
object-fit 为什么不能替代 srcset 或 picture
object-fit 只控制图片在容器内的渲染方式，不改变实际下载的图片文件大小或分辨率。浏览器仍会按 src 或 srcset 指定的资源加载完整图像——哪怕你用 object-fit: cover 裁掉 80% 的像素，那部分数据照样下载完才裁。
常见错误现象：img 元素设了 width: 100%; height: 200px; object-fit: cover;，但 Lighthouse 仍报“未适配视口宽度的图片”，因为没提供响应式源。
- 必须配合
srcset+sizes，或picture+source才能真正减少流量 -
object-fit的作用是让多尺寸图“长得整齐”，不是“省得下” - 移动端尤其要注意：高 DPR 设备（如 iPhone）会优先加载
x2图，若srcset缺失，它只能拉取单张大图再缩放，白耗带宽
cover 和 contain 的裁剪逻辑差异
object-fit: cover 保持宽高比并填满容器，超出部分裁剪；object-fit: contain 保持宽高比并完整显示，留白区域出现。两者对布局影响不同，选错会导致关键内容被切掉或留出意外空白。
使用场景举例：头图 banner 必须用 cover，否则顶部标题可能被压缩变形；用户头像预览组件常用 contain，避免脸部被裁。
立即学习“前端免费学习笔记（深入）”；
-
cover下，图片的“焦点区域”是否居中？默认是，但可通过object-position: 20% 30%微调（单位支持 %、px、em） -
contain在窄屏下容易产生上下大片留白，需配合background-size: contain+background-image替代方案测试效果 - 不要假设所有图都适合
cover：证件照、图表、文字截图等一旦裁剪就失效
IE 不支持 object-fit 的降级方案
IE 11 及更早版本完全忽略 object-fit 和 object-position，直接拉伸图片填满容器，导致严重畸变。不能只靠 CSS 降级，得从 HTML 结构入手。
错误做法：只加 @supports (object-fit: cover) { ... }，IE 里啥也不做。
- 推荐用
picture包裹img，并在 IE 中 fallback 到background-image方案（需 JS 检测或条件注释） - 纯 CSS 方案可用
font-family: 'object-fit: cover';hack 触发 IE 条件样式，但兼容性不稳定，慎用 - 更稳妥的是服务端 UA 判断，在 IE 请求时直接返回带内联
style="background: url(...) center/cover;"的div，绕过img标签
和 background-image 对比：什么情况该换用 CSS 背景
当图片仅作装饰、无语义、不需要 SEO 或可访问性支持时，background-image 配合 background-size: cover 更灵活，且天然支持多层叠加、渐变遮罩等效果。
但换用前必须确认：这张图是否承担内容职责？比如轮播图中的商品主图、文章配图、图标按钮，都属于内容型图片，必须用 img 标签 + alt。
-
background-image无法设置srcset，需靠媒体查询切换不同background-image值，维护成本高 - 无障碍方面：
img支持alt、loading="lazy"、decoding="async"，背景图全不支持 - 性能提示：CSS 背景图不会触发
load事件，JS 无法监听加载完成；而img可结合loading="lazy"做原生懒加载
复杂点在于：裁剪逻辑看似一样，但 object-fit 是元素级控制，background-size 是盒模型级控制——容器 padding、border 都会影响最终可视区域，这点很容易被忽略。
