Safari 13.3 及更早版本不支持 object-fit: cover 在 img 上生效，需用 @supports 降级、显式设置 flex-shrink: 0、overflow: hidden 和 display: block 等条件确保裁剪正常。
为什么Safari里object-fit: cover还是拉伸变形
不是写错了，是 Safari 13.3 及更早版本压根不支持 object-fit 在 <img alt="如何解决Safari浏览器中CSS图片object-fit变形" > 上生效——加 -webkit-object-fit: cover 也无效，浏览器直接退化成 fill 行为，也就是强制拉伸。
这种失效在真机上尤其明显：横竖屏切换、键盘弹出、SSR 首屏渲染时，容器高度可能瞬间塌陷为 0，object-fit 就彻底失去作用基准。
- 检查当前 Safari 版本：iOS 13.3 及以下 → 必须降级；iOS 14+ → 支持但仍有部分 Flex/Grid 嵌套 bug
- 别只看 DevTools 里样式是否“打钩”，要查 computed 样式中
object-fit的实际值是不是fill - 用
@supports (object-fit: cover)包裹现代写法，否则旧版会静默忽略整条规则
Flex/Grid 布局中object-fit在 Safari 失效的典型原因
不是 object-fit 本身的问题，而是 Safari 对 Flex 子项的尺寸计算更严格：默认 flex-shrink: 1 + min-width: auto 会让图片被压缩到固有尺寸以下，导致裁剪框失真。
-
img必须显式设flex-shrink: 0或flex: 0 0 auto，否则 Safari 会把它压窄 - 父容器若为
display: flex，且未设min-height或height，加载中高度为 0，object-fit无盒可填 - 嵌套 Flex 时，
img的直接父容器需加min-width: 0，否则 Safari 拒绝缩放，图片可能突变成一条细线 - 避免在
img上同时用max-width: 100%和height: auto，它们会覆盖object-fit的尺寸逻辑
兼容 Safari 13.3 及更早版本的可靠降级方案
不要依赖 polyfill（如 object-fit-images），它在 Safari 旧版中常触发重排、懒加载失效、甚至白屏。优先用 CSS 原生 fallback。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports not (object-fit: cover)写降级规则，例如：@supports not (object-fit: cover) { .card-img img { width: 100%; height: auto; } .card-img { background-size: cover; background-position: center; } } - 关键场景（如头像、轮播封面）直接服务端裁剪：返回固定比例（如 1:1 或 16:9）的图，前端只设
width: 100%; height: 100%，绕过object-fit - 不用
aspect-ratio作主方案：Safari 13.3 不支持，fallback 要用padding-bottom+position: absolute，但必须确保父容器position: relative
object-fit: cover 在 Safari 中必须配的三个硬性条件
缺一不可，否则哪怕 Safari 支持，也会在特定时机（如动态插入、resize 后）突然失效。
-
img自身要有可计算宽高：width: 100%+height: 100%（不能只靠父容器撑高），或width: 100%+aspect-ratio: 16 / 9 -
img必须设display: block，否则 inline 默认基线间隙会干扰高度计算，Safari 对此更敏感 - 父容器必须加
overflow: hidden，否则 Safari 下裁剪部分可能溢出边框，尤其在transform或scroll容器中
真正难处理的不是属性本身，而是 Safari 对“盒子”的测量时机：它比 Chrome 更晚确定尺寸，所以任何依赖 JS 动态插入、CSS-in-JS 注入、或 SSR hydration 后才生效的样式，都容易卡在“无盒可填”的状态里。
