不能。只设flex-shrink: 0仅禁用收缩，但若无flex-basis: auto、width: auto和height: auto配合，图片仍会坍缩或拉伸；必须三者协同才能稳住固有尺寸并防止变形。
flex-shrink: 0 能不能单独解决图片挤压变形
不能。只设 flex-shrink: 0 能阻止收缩，但图片仍可能因父容器尺寸失控而溢出、错位或触发横向滚动——这不是 bug，是 Flex 布局的正常行为。真正变形的根源是：浏览器对替换元素（如 img）在 flex-shrink: 1 下会按主轴可用空间强行缩放，破坏固有宽高比。
为什么 flex-shrink: 0 必须搭配 flex-basis 和 width/height
flex-shrink: 0 只禁用收缩，不定义初始尺寸。若省略 flex-basis（比如只写 flex: 0 0），等价于 flex-basis: 0px，图片会坍缩成一条线；若设 flex-basis: 100% 又可能拉伸——尤其高度未约束时。
-
flex-basis: auto：使用图片原始 intrinsic size，最安全的起点 -
width: auto必须显式声明，否则flex-basis可能被width覆盖 - 响应式场景下，
min-width: 0比flex-shrink: 0更底层有效（覆盖默认min-width: auto）
一行最小可靠写法及常见踩坑
直接加在 img 标签样式上即可应对多数挤压场景：
img {
flex: 0 0 auto;
width: auto;
height: auto;
}
容易忽略的坑：
- 父容器用了
align-items: stretch（Flex 默认值）且设了固定高度 → 图片被垂直撑开，此时flex-shrink: 0无效，得配合object-fit - React/Vue 中图片动态加载，占位尺寸为 0，加载后突然撑开，触发重排 → 需预设
aspect-ratio或占位容器 - IE 不支持
object-fit，但flex-shrink: 0在 IE10+ 有效（需补-ms-flex-negative: 0）
和 object-fit 是什么关系
flex-shrink: 0 稳住外框不被压缩，object-fit 控制图片内容如何填进这个框。两者必须配合：
- 没设
flex-shrink: 0：框被压扁，object-fit再怎么 cover 也是在扭曲画布上裁剪 - 没设
object-fit：框尺寸对了，但图片内部仍可能被拉伸（尤其父容器有固定宽高） - 推荐组合：
flex: 0 0 auto; width: auto; height: auto; object-fit: contain;
复杂点在于：图片是否作为直接 flex item、父容器是否有嵌套 flex、是否启用懒加载——这些都会让 flex-shrink: 0 的作用范围变模糊，得逐层检查 computed 样式确认生效节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
