根本原因是safari对align-items: stretch的严格实现导致img被强制拉伸；需同时设置flex-basis: 0px、min-height: 0、width/height显式声明及-webkit前缀，才能使object-fit生效。
为什么Safari里flex容器中的img会拉伸变形
根本原因不是“浏览器bug”，而是Safari（尤其iOS 12–13.3 / macOS Safari 10–13.1）对Flex默认行为的解析更严格：align-items: stretch在交叉轴上强制撑开所有子项，而<img>作为替换元素，其height: auto会被覆盖，直接按容器高度拉伸——宽高比瞬间崩坏。这不是渲染异常，是它认真执行了规范里“stretch”的定义。
必须同时写死flex-basis和min-height才能让flex: 1不拉伸图片
当父容器用flex: 1分配空间，且子项是<img>时，旧版Safari会把flex: 1解析为flex: 1 1 auto，导致flex-basis: auto触发内容高度推算失败（尤其缩放后）。此时仅加object-fit无效，因为盒子本身已坍缩或撑爆。
-
flex-basis必须显式设为0px（不能用0%，Safari会忽略） -
min-height: 0是硬性配套——Safari对min-height: auto（默认值）处理极激进，会阻断flex-basis: 0px的拉伸启动 - 若布局是
flex-direction: column，则对应写min-width: 0 - 图片本身需加
height: auto，否则Safari可能冻结其内在尺寸估算
object-fit生效的前提：宽高+display+父容器高度三者缺一不可
object-fit只控制“内容怎么填进盒子”，不定义盒子大小。在Safari中，单独写object-fit: cover几乎总失效，因为<img>没被赋予明确渲染尺寸。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 图片样式必须含
width: 100%和height: 100%（或height: auto），否则object-fit无作用范围 - 图片的**直接父容器**必须有确定高度（如
height: 200px、flex-basis: 200px，或通过aspect-ratio锚定） - 多层Flex嵌套时，如果
<img>不是Flex直接子项，要把object-fit和尺寸声明移到那个中间<div>上，并加<code>display: block - 避免
max-width: 100%和width: 100%共存，可能触发Safari尺寸重算异常 - 必须成对出现：
display: -webkit-flex+display: flex，且前缀版写在前面 - 所有关键属性都要补前缀：
-webkit-flex-direction、-webkit-justify-content、-webkit-align-items、-webkit-flex-wrap -
flex缩写要用-webkit-flex（不是-webkit-flex-box） - autoprefixer需显式配置
ios_saf >= 11.3或safari >= 10，默认last 2 versions不会输出这些前缀
前缀不是可选项，是Safari 9–13.1的启动开关
仅写display: flex在iOS 13.3及更早版本中完全不生效——Safari 9–13.1实现的是旧草案，只识别display: -webkit-flex及其配套属性。
真正卡住人的从来不是单个属性，而是校准链：父容器高度锚定 → 子项flex-basis和min-height清零 → 图片自身width/height显式声明 → object-fit才开始工作。少一环，Safari就按它的逻辑走到底——不是修bug，是跟它对齐计算前提。
