object-fit: cover在移动端失效主因是容器缺乏明确宽高，必须配合aspect-ratio或固定尺寸、overflow: hidden父容器及img的width/height:100%才可靠裁剪。
object-fit: cover 在移动端为什么经常不裁剪
因为容器没设明确宽高，object-fit 就没裁剪基准。移动端常见塌陷场景：父容器用 width: 100% 但没设 height 或 aspect-ratio，或者嵌套在 Flex/Grid 里却没加 flex-shrink: 0 或固定尺寸。
必须显式声明容器尺寸，哪怕用现代方案：aspect-ratio: 1 / 1（iOS Safari 16.4+、Android Chrome 107+ 均支持）。老版本 iOS Safari（≤15.6）需降级为固定像素或 JS 补丁。
- 别依赖
height: auto—— 它会让容器高度由图片原始尺寸决定，cover失效 - 用
aspect-ratio比写死height: 200px更安全，响应式友好 - 检查 DevTools 中容器是否真有渲染高度：hover 元素看 computed height 是否 > 0
如何让头像图始终显示人脸区域而不是头顶或下巴
靠 object-position 微调锚点位置，配合 object-fit: cover。默认居中（50% 50%），但人脸通常在上半部，所以把锚点往上移。
例如：想稳定露出眼睛到肩膀区域，可设 object-position: 50% 25%（横向居中，纵向上移至 25% 处）。实测中，20% ~ 35% 是多数人像的舒适区间。
-
object-position只在object-fit为cover、contain或none时生效 - 值支持像素、百分比、关键词（如
top left），但百分比更适配不同尺寸原图 - 不要用
transform: translateY()替代 —— 那是移动整个 img 元素，不是调整图像内部焦点
移动端 Safari 对 object-fit 的兼容性坑点
iOS Safari 15.4 之前不支持 object-fit，15.4–16.3 需加 -webkit-object-fit 前缀；16.4+ 原生支持。但即使支持，仍有两个隐藏问题：
- 当图片通过
srcset加载高清资源时，Safari 可能延迟应用object-fit，导致闪动 —— 解决办法是加img { display: block; }防止 inline 空隙干扰重绘 - 在
position: fixed容器里，某些 iOS 版本会忽略object-position—— 改用绝对定位 +transform组合兜底 - 如果必须兼容 iOS 14 及更早，只能放弃
object-fit，改用background-image+background-size: cover，但会丢失alt和语义化
用 overflow: hidden 还是 rely on object-fit 自带裁剪
object-fit: cover 本身不依赖 overflow: hidden 就能裁剪，但显式声明仍是必要习惯。原因有三：
- 部分 Android WebView（尤其旧版 UC、QQ 浏览器）对
cover的溢出处理不一致，overflow: hidden是兜底保险 - 当图片加载失败或
src为空时，img会退化为内联元素并撑开容器，overflow: hidden能防止布局突变 - 和
object-position配合时，overflow: hidden确保偏移后的图像边缘被干净截断，避免模糊像素外露
所以标准写法应是：容器设 width/height 或 aspect-ratio + overflow: hidden，img 设 width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
