object-fit 失效因缺少宽高上下文；需显式设尺寸或用 aspect-ratio 配合，cover 适合裁剪填充，contain 保证全图可见，ios safari 13.3 前不支持。
只写 object-fit: cover 或 object-fit: contain 根本没用——浏览器连“往哪 fit”都不知道，属性直接静默失效。
为什么加了 object-fit 还是拉伸变形？
不是语法错，是浏览器没拿到可计算的宽高上下文。常见情况包括：
-
img只设了width: 100%，但没设height，也没用aspect-ratio锁定父容器比例 - 父容器是
display: flex，默认align-items: stretch把img拉满高度，而img自身又没写height: 100% - 同时写了
max-width: 100%和height: auto，这会覆盖object-fit的尺寸计算逻辑 - 忘了给
img加display: block，inline 元素底部默认留白，干扰实际渲染高度
必须配合的容器尺寸控制方式
object-fit 不是独立生效的样式，它依赖“盒子”的存在。可靠做法只有两类：
- 显式固定尺寸：
width: 100%; height: 250px;（适合卡片高度统一的场景） - 现代推荐：用
aspect-ratio: 16 / 9配合流体宽度，比如.img-wrapper { width: 100%; aspect-ratio: 4 / 3; }，再让img填满这个盒子
注意：Bootstrap 的 .img-fluid 默认带 height: auto，会直接废掉 object-fit 效果，必须覆盖或换类。
cover 和 contain 到底怎么选？
这不是风格偏好，是内容语义决定的：
-
object-fit: cover：填满无空隙，但默认裁剪中心 → 适合轮播封面、产品主图、头像；必须配object-position（如center top）防人脸被切 -
object-fit: contain：整图必须可见，留白可接受 → 适合证件照、UI 图标、技术配图；此时object-position只影响图片在留白区内的对齐，不改变是否裁剪 -
object-fit: fill就是强制拉伸，和不写效果一致，除非刻意做故障效果，否则一律避免
iOS Safari 13.3 及更早版本的兼容性陷阱
这不是样式没加载，而是引擎级不识别：object-fit 在 iOS Safari 13.3 及之前完全不生效，加 -webkit-object-fit 也无效，行为退化为 fill（即拉伸）。稳妥降级方案只有两个：
- 用
@supports (object-fit: cover)包裹现代写法，再给不支持环境写 fallback 规则 - 改用
background-image+background-size: cover，但会丢失alt、SEO 和原生懒加载
真机测试时最容易忽略横竖屏切换、软键盘弹出导致容器比例突变——这时 cover 可能让小图缩得极小，需用 @media (orientation: landscape) 等兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
