object-fit: cover 生效需容器有可计算宽高，否则失效；必须配合 width/height 或 aspect-ratio、display: block 和 overflow: hidden 三要素，并注意 ios safari 兼容性及 object-position 调整。
object-fit: cover 本身不会防止拉伸——它只在容器尺寸明确的前提下生效；如果 img 或其父容器没有可计算的宽高，它就完全不工作，图片照样被原始比例撑开或被强制拉伸。
为什么加了 object-fit: cover 还是变形？
根本原因不是属性写错了，而是浏览器没“盒子”可装图。常见失效场景包括：
-
img只设了width: 100%，但没设height、aspect-ratio，也没用padding-bottom模拟高度 → 图片按原始尺寸撑开容器 - 父容器是
display: flex或grid，子项未设min-height或height: 100%，加载中时高度塌陷为 0 - 用了
float但没清除，父容器高度为 0，img实际脱离文档流渲染 - Bootstrap 的
img-fluid含height: auto，和object-fit: cover冲突，必须显式覆盖
object-fit: cover 必须配合哪些 CSS 才生效？
三要素缺一不可：
- 容器（
img自身或其父元素）要有可计算的尺寸：width: 100%+aspect-ratio: 16 / 9（✅ 推荐），老浏览器 fallback 用padding-bottom: 56.25%+position: relative -
img需设width: 100%+height: 100%（或height: auto配合容器锁高），并加display: block消除行内基线间隙 - 父容器记得加
overflow: hidden，否则cover裁剪部分可能溢出边框
object-fit: cover 和 object-position 怎么配？
cover 默认裁剪锚点是 center center，对头像、产品主图、轮播封面这类内容极易切掉关键区域：
- 人脸偏上？写
object-position: center top或20% 30%微调 - Logo 在左上角？用
object-position: left top - 不要依赖默认值——只要用了
cover，就该主动检查裁剪是否合理
iOS Safari 13.3 及更早版本怎么处理？
这些版本完全不支持 object-fit 在 img 上生效，加 -webkit-object-fit 前缀也无效，会退化成 fill 行为（即拉伸）：
- 关键场景（如用户头像）建议服务端返回固定比例图片，规避前端适配问题
- 非关键场景可用 polyfill（如
object-fit-images），仅在检测到不支持时加载 - 背景图方案（
background-image+background-size: cover）有效，但失去img的语义化和 SEO 优势
最常被忽略的一点：你写的 object-fit: cover 很可能根本没执行——因为父容器高度是 0，或者 img 的 height 是 auto，又或者你在 Flex/Grid 容器里忘了给子项加 min-height。先确认尺寸存在，再谈缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
