Safari中object-fit失效的根本原因是图片外框被Flex默认行为压塌，必须先用flex:0 0 auto、width:auto、height:auto和min-width:0稳住尺寸，再应用object-fit；其对min-width:auto和flex-basis解析更严格，易致图片坍缩或拉伸。
直接加 object-fit 不起作用，是因为 Safari 下图片外框早被 Flex 的默认行为压塌了——必须先稳住尺寸，再谈裁切或缩放。
为什么 Safari 里图片拉伸更明显
Safari 对 Flex 子项的 min-width: auto 和 flex-basis 解析更严格，尤其在嵌套容器或父容器高度未显式定义时，img 容易被压缩成细线，或被 align-items: stretch 拉高。这不是 bug，是它更忠实地执行了规范中“替换元素最小尺寸保护”逻辑。
-
flex-shrink: 0单独写无效：Safari 会回退到flex-basis: 0，图片直接坍缩 -
width: 100%+height: auto在 Safari 中可能触发重算异常，尤其配合max-width时 - 旧版 Safari（object-fit，且对
aspect-ratio支持有限
必须加的四条 CSS 规则
只改其中一两条，Safari 仍大概率出问题。这四条要同时作用于 img 元素本身：
-
flex: 0 0 auto：禁用伸缩，锚定固有尺寸（比单独写flex-shrink: 0更可靠） -
width: auto和height: auto：解除框架或重置样式对比例的干扰 -
min-width: 0：告诉 Safari：“这个图片可以缩到 0”，绕过默认的min-width: auto保护
示例：
img {
flex: 0 0 auto;
width: auto;
height: auto;
min-width: 0;
}
align-items 和 object-fit 怎么配才生效
align-items: stretch 是拉伸主因，不是“对齐问题”。在 flex-direction: row 下，它会让所有子项（包括 img）强行撑满父容器高度——此时 object-fit 还没机会工作，因为外框已经失守。
- 优先设父容器
align-items: flex-start或center，解除垂直拉伸 - 再加
object-fit: cover或contain，此时才有稳定盒子可操作 - 避免混用
height: 100%和object-fit：前者会锁死高度，让object-fit失效 - 若需兼容 Safari background-image +
background-size: coverfallback
动态加载和响应式下的隐藏陷阱
React/Vue 中图片加载前占位为 0，Safari 渲染更保守，容易导致闪动或错位；移动端 viewport 缩放、position: fixed 父容器也会加剧挤压。
- 预设
aspect-ratio: 16/9（Chrome 88+/Safari 15.4+），比 padding-top hack 更干净 - 旧 Safari fallback：用伪元素或空
div占位，宽高比靠padding-bottom维持 - 检查 computed styles，确认
flex-shrink真为0，且父元素display确实是flex（不是inline-flex或被覆盖）
真正容易被忽略的，是图片是否作为**直接 flex item**——如果中间隔了一层 div，那上面所有规则都得加在那个 div 上，而不是 img 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
