flex-shrink: 0 需与 width: auto; height: auto 和 min-width: 0 配合使用才能真正阻止图片压缩，缺一不可；否则因隐性规则覆盖或前提缺失仍会失效。

flex-shrink: 0 是阻止图片被压缩的开关，不是万能保险栓

它直接关掉 Flex 布局中“空间不足就缩你”的默认行为。图片在 Flex 容器里默认是 flex-shrink: 1，只要所有子项总宽超过容器，浏览器就会无视你写的 width: 200px 或 max-width: 100%，强行按比例缩小图片——flex-shrink: 0 就是告诉浏览器：“别动我宽度，哪怕挤爆容器”。但它不定义尺寸、不防溢出、也不管内容怎么填进框里。

为什么加了 flex-shrink: 0 还是变形？常见失效链路

失效几乎从不因为语法写错，而是被隐性规则覆盖或前提缺失：

• flex-shrink: 0 加在了 <div> 上，但真正要保形的是里面的 <code><img> —— 必须作用于 Flex 容器的**直接子元素**
• 图片父容器没设 width 或 min-width，自己先塌缩，子项再怎么 flex-shrink: 0 也无框可守
• 图片自身没配 width: auto; height: auto，导致 flex-basis fallback 到不可控的固有尺寸（比如 800px），反而加剧溢出
• 漏掉 min-width: 0 —— 替换元素（如 <img>）默认 min-width: auto，会锁死最小宽度，让 flex-shrink: 0 形同虚设

真正起效的最小组合：三件套缺一不可

单靠 flex-shrink: 0 在真实项目里大概率翻车。必须搭配：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• flex-shrink: 0：关掉收缩开关
• width: auto; height: auto：确保图片按原始 intrinsic size 计算基准，不被 width: 100% 覆盖
• min-width: 0：解除替换元素的隐性最小宽度锁定，让 Flex 引擎允许尺寸归零（否则 flex-shrink: 0 根本不会触发）

如果父容器宽度受限，再补一句 max-width: 100% 防溢出；若需保持比例，object-fit 是后续步骤，不是替代方案。

IE11 和 Safari 的兼容细节不能跳过

IE10+ 支持 flex-shrink: 0，但需要加前缀：-ms-flex-negative: 0；Safari 对 min-width: fit-content 支持较晚（iOS 14.5+），老版本建议用 min-width: 1px 或包裹层方案兜底。更稳妥的兼容写法是：用 <div style="flex-shrink: 0; width: 80px; height: 80px;"><img src="x.jpg" style="max-width:90%"></div> —— 用父容器尺寸硬锁，绕过图片自身弹性计算。

复杂点不在属性本身，而在它和 min-width、flex-basis、替换元素默认行为之间的耦合。漏掉任意一环，flex-shrink: 0 就只是 CSS 文件里一行安静的注释。