旧版edge（12–18）和ie全系不支持object-fit，须降级：background-size: cover是纯css最稳方案，需改img为background-image并设明确宽高；用object-fit-images插件则必须满足引入顺序、声明css、父容器relative及图片加载完成。
旧版 Edge（12–18）和 IE 全系（包括 IE11）根本不解析 object-fit，写了等于没写——你看到的拉伸或溢出不是“效果不准”，是浏览器直接跳过该声明，退回到默认 fill 行为。
为什么 background-size: cover 是最稳的纯 CSS 降级方案
它不依赖 JS、IE9+ 全支持、裁剪逻辑与 object-fit: cover 一致，但必须接受语义损失：把 <img src=""> 改成 <div style="max-width:90%"></div>。
- 容器必须有明确宽高，或用
padding-top百分比 hack（如父容器position: relative，子div设padding-top: 56.25%+position: absolute） -
background-position必须写成50% 50%，center center在 IE11 下不稳定 - 显式写
background-repeat: no-repeat，否则 IE 可能平铺 - 若需响应式，
aspect-ratio在 IE 中无效，不能靠它推导高度
用 object-fit-images 插件时，哪些条件缺一不可
这个轻量库（约 2KB）只在检测到不支持时才激活，模拟五种行为和 object-position 偏移，但极易因时机或结构失效。
Smart Ledger
下载
智能收支追踪器 — 通过自然语言快速记账，自动分类，生成日/周/月报告和趋势分析。 支持中文自然语言输入("今天午饭花了35元")，数据本地JSON存储保护隐私。 适用于个人财务管理、预算追踪和消费分析场景。
- 引入顺序：先加载
object-fit-images.min.js，再在DOMContentLoaded或window.onload中调用objectFitImages() - CSS 中必须已声明
object-fit: cover和object-position: 50% 50%，插件才会读取并生效 - 父容器必须设
position: relative，否则生成的裁剪层定位错位 - 图片必须加载完成才能获取
naturalWidth/naturalHeight；懒加载图片建议加固定height占位 - 动态插入的
<img>（如 Vue/React 渲染后）需手动再次调用objectFitImages()
最容易被忽略的视觉偏差问题
background-size: cover 和 object-fit-images 都无法保证裁剪起点完全一致：IE 的 cover 裁剪基准点与 Chrome/Firefox 不同，尤其当容器宽高比与图片差异大时（如竖版人像放进横版卡片），脸部可能意外偏移。
-
object-position: 50% 50%在插件中转为transform偏移，但 IE 对em/rem单位计算不准，只推荐用%或px - 理论值没用，必须在真实 IE 环境下预览，微调
background-position（比如从50% 50%改为47% 53%）来对齐视觉焦点
真正麻烦的不是怎么填满，而是填满之后哪部分被切掉——IE 没有标准可循，只能靠预览校正。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
