不能。flex-shrink: 0 单独使用无法修复移动端图片压缩变形，因缺失 flex-basis 导致初始尺寸失控，须配合 flex: 0 0 auto、width: auto、height: auto 三者协同。
flex-shrink: 0 能不能单独修复移动端图片压缩变形
不能。只设 flex-shrink: 0 会禁用收缩，但图片仍可能坍缩成一条线、溢出容器、或因 flex-basis 缺失而尺寸失控——这不是 bug，是 Flex 布局的计算逻辑使然。
根本问题在于：移动端视口窄 + 父容器未约束宽度 + 图片作为替换元素（replaced element）默认无固有宽高比保护。浏览器在 flex-shrink: 1 下强行按主轴可用空间缩放，直接破坏 intrinsic 尺寸。
-
flex-shrink: 0只跳过收缩阶段，不提供初始尺寸基准 - 若没设
flex-basis，等价于flex-basis: 0px，图片塌陷 - 若误写
flex-basis: 100%，图片会被拉伸（尤其高度未约束时） - 移动端常见组合陷阱：
position: fixed容器 + 未设flex-shrink: 0+img无max-width: 100%→ 外框失守、object-fit失效
移动端必须配合的三项关键声明
单靠 flex-shrink: 0 不够，得用三者协同锚定图片行为：
-
flex: 0 0 auto—— 等价于flex-grow: 0+flex-shrink: 0+flex-basis: auto，明确禁伸缩、以原始尺寸为基准 -
width: auto—— 防止 CSS 重置覆盖 intrinsic width；若写width: 100%，反而和flex-basis: auto冲突 -
height: auto—— 关键补丁，确保宽高比不被强制拉高；缺它，object-fit也救不回比例
一行最小可靠写法（直接加在 img 上）：
img { flex: 0 0 auto; width: auto; height: auto; }
为什么不能只给 img 加 flex-shrink: 0 而不设 flex-basis
因为 Flex 布局分两步计算：先按 flex-basis（或 width / height）确定初始尺寸，再按 flex-shrink 分配剩余空间。如果 flex-basis 缺失，浏览器 fallback 到 width，而 img 的默认 width 是 auto —— 这个值对 Flex 引擎不可计算，导致布局退化。
- 现象：写了
flex-shrink: 0，但图片在小卡片里仍变成竖条或消失 - 原因：
flex-basis: auto才能触发浏览器读取图片 intrinsic size；省略它，等于没给引擎“起点” - 验证方法：用 DevTools 查看 Computed 面板中
flex-basis的实际解析值，常显示为auto或0px，而非预期像素 - 移动端特别注意：
flex-direction: column容器中，flex-basis控制的是高度，此时要同步检查max-height和object-fit配合方式
移动端绕不开的兼容性与性能细节
在 iOS Safari 或旧版 Android WebView 中，仅靠 flex-shrink: 0 容易失效，需额外兜底：
- IE10+ 和旧 Safari 需加前缀：
-ms-flex-negative: 0（对应flex-shrink） - 慎用
min-width: 0替代方案：它覆盖默认min-width: auto，允许内容安全溢出，但会削弱防挤压效果，更适合图文混排场景 - 性能影响极小，但若大量图片都设
flex-shrink: 0，窄屏下可能触发横向滚动——这不是 bug，是你主动选择了“宁可溢出也不压缩” - 动态加载图片（如 React/Vue 懒加载）更易出问题：加载前占位尺寸为 0，加载后突然撑开，触发 Flex 重排；建议用
aspect-ratio或padding-top占位保结构
真正容易被忽略的，是 flex-shrink: 0 只管外框不缩，不管内容怎么填——object-fit 才负责图像内部渲染，两者不在同一层，漏掉任一环节，图片就还在变形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
