object-fit: cover + object-position 是语义正确、可访问、兼容性够用的首选方案；需容器有明确宽高或 aspect-ratio，img 设 width/height:100%，且仅在 cover/contain 下 object-position 生效，其百分比基准为图片原始尺寸。
直接用 object-fit: cover 配合 object-position，再确保容器和图片尺寸明确——这是最轻量、最可靠、也最符合语义的方案。
为什么不用 overflow: hidden + 定位手动裁剪
这种做法看似可控，但实际要处理宽高比判断、缩放方向选择、偏移量计算、onload 时机等一堆 JS 逻辑，响应式下还要监听 resize。一旦容器宽高动态变化（比如配合 aspect-ratio 或 flex 基础尺寸），手动定位极易错位。现代浏览器早已原生支持更优雅的替代方案，没必要自己造轮子。
object-fit: cover 必须配哪些样式才生效
常见失效原因是漏掉关键约束。以下四点缺一不可：
- 父容器必须有明确的
width和height（或通过aspect-ratio+width推导出高度） -
img元素需设width: 100%和height: 100%（仅设一个会破坏比例） - 避免父容器是
inline或未清除浮动，否则尺寸塌陷 - 若父容器用了
display: flex或grid，记得确认没意外触发align-items: stretch导致图片被拉高
如何精准控制裁剪“哪一部分”居中
object-fit: cover 默认以图片中心对齐容器中心，但很多场景需要顶部对齐（比如头像）、底部对齐（比如产品图脚部留白）或自定义坐标：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 顶部居中：
object-position: center top - 底部居中：
object-position: center bottom - 左上角对齐：
object-position: 0 0 - 偏移 20px 向右、10px 向下：
object-position: 20px -10px
注意：object-position 的单位支持 px、%、em，但百分比值是相对于图片自身尺寸计算的（0% = 图片左/上边缘，100% = 右/下边缘），不是容器。
兼容性与 fallback 要不要加
object-fit 和 object-position 在所有现代浏览器（Chrome 32+、Firefox 36+、Safari 10.1+、Edge 16+）都已稳定支持，包括 iOS Safari 10.3+ 和 Android Chrome。如果你的项目不需支持 IE11 或旧版安卓 WebView，可放心使用，无需 polyfill。
若必须兼容 IE11，fallback 方案只能退回到 background-image：把图片转为容器背景，用 background-size: cover + background-position 模拟，但会丢失 alt、SEO 和图片加载事件等语义能力——这个取舍点常被忽略，得提前评估。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
