flex-shrink: 0单独无效，必须配合flex-basis和width/height: auto；最稳写法是flex: 0 0 auto、width: auto、height: auto、min-width: 0，并确保外框稳定后再用object-fit控制填充。
flex-shrink: 0 单独写没用，必须配 flex-basis 和 width/height
只设 flex-shrink: 0 看似禁用了收缩，但浏览器会回退到 flex-basis: 0，图片直接坍缩成一条线；若父容器宽度窄，它又可能溢出。真正起效的组合是：flex: 0 0 auto（等价于 flex-grow: 0、flex-shrink: 0、flex-basis: auto），再显式加 width: auto 和 height: auto —— 否则 CSS 重置或框架样式可能覆盖图片固有尺寸。
object-fit 不生效？先看外框稳不稳
object-fit: cover 或 object-fit: contain 不是开关，它只在图片已有稳定外框时才起作用。如果 img 已被 flex-shrink: 1 压成细长条，object-fit 只能在扭曲画布上裁图。必须按顺序来：
① 确保 img 是直接 flex item（父元素 display: flex）；
② 加 flex: 0 0 auto; width: auto; height: auto；
③ 再加 object-fit；
④ 别写 width: 100%; height: 100%，那是强制拉伸。
嵌套 Flex 里图片变竖线？查 min-width: 0
多层 Flex 嵌套（比如卡片 → 内容区 → 图片区）时，图片常被压成细长竖线，这不是 object-fit 失效，而是浏览器默认 min-width: auto 拒绝把替换元素缩太小。解决方案是在 img 或其**直接父容器**上加 min-width: 0。典型安全写法：img { max-width: 100%; height: auto; min-width: 0; flex: 0 0 auto; }。用 DevTools 检查 computed styles，确认 flex-shrink 确实为 0，且父元素 display 真的是 flex。
align-self: center 或 align-items: flex-start 不能防变形
align-self: center 只控制交叉轴定位，不影响主轴缩放；align-items: flex-start 能避免垂直拉伸，但不解决宽高比失真——它只是“放弃拉伸”，不是“保持比例”。真正关键的仍是 flex-shrink: 0 + width/height: auto + object-fit。如果父容器是 flex-direction: column，交叉轴变成水平方向，align-self 控制的是宽度对齐，此时更得盯紧 flex-basis 是否作用在高度上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
