object-fit: cover 或 contain 生效的前提是容器有可计算宽高；否则浏览器无“盒子”可填，导致拉伸变形。需配合 aspect-ratio、height: 100%、display: block 等确保尺寸上下文，并注意 safari 13.3 及以下不支持，须用 background-image 或 @supports 降级。
只写 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 元素底部默认留白，干扰实际高度
aspect-ratio 必须和 object-fit 配合使用
aspect-ratio: 4 / 3 单独存在只约束容器宽高比，不控制图片怎么渲染；它只是提供一个“盒子”，真正决定图片怎么装进去的是 object-fit。
- 推荐写法：
.img-wrapper { width: 100%; aspect-ratio: 4 / 3; }+.img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; } - 老浏览器 fallback：用
padding-bottom: 75%+position: relative+ 绝对定位img替代aspect-ratio - 别在同一个
img上同时写max-width: 100%和width: 100%，Safari 旧版可能因此重排异常
object-fit: cover 和 object-fit: contain 不是风格选择，是语义绑定
选错值会导致关键内容丢失或大量留白，不是“好不好看”的问题：
-
object-fit: cover：适合卡片图、轮播封面、头像——填满无空隙，但默认裁剪中心，人脸常被切掉；必须配object-position: center top等微调锚点 -
object-fit: contain：适合证件照、产品主图、图标——整张图必须可见，留白可接受；此时object-position几乎无效 -
object-fit: fill就是强制拉伸，等同于没写object-fit，除非刻意做故障效果，否则一律避免
iOS Safari 13.3 及更早版本的兼容性陷阱
这不是样式没加载，而是引擎级不识别：object-fit 在 iOS Safari 13.3 及之前完全不生效，加 -webkit-object-fit 也无效，会退化成 fill 行为（即拉伸）。
- 稳妥降级方案：用
background-image+background-size: cover替代，但会丢失alt、SEO 和原生懒加载 - 保留
img的方案：用@supports (object-fit: cover)包裹现代样式，外面写 fallback；或 JS 检测'objectFit' in document.documentElement.style动态替换 - 最容易被跳过的是三点：容器没锁比例、忘了配
object-position、在 Safari 13 以下环境直接写object-fit却不兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
