要让图片不拉伸，必须组合 object-fit、明确宽高和 flex-shrink: 0；align-self 只控制对齐位置，不阻止拉伸，因浏览器仍按 align-items: stretch 计算空间且图片默认 object-fit: fill。
align-self: flex-start 不能防止拉伸，它只是让图片“放弃填满高度”，但变形根源仍在。
为什么加了 align-self: flex-start 图片还是被压扁
常见现象是：父容器 display: flex + height: 200px，图片加了 align-self: flex-start 后顶部对齐、下方留白，但宽高比依然失真——这不是修复，是把拉伸变成了“错位”。根本原因有三个：
- 浏览器仍按
align-items: stretch的默认逻辑计算可用空间，而align-self只影响交叉轴对齐位置，不干预尺寸缩放 - 图片没设
object-fit，替换元素在弹性约束下默认走object-fit: fill（即强制拉伸） - 如果父容器用了
flex-direction: column，交叉轴变成水平方向，align-self: flex-start控制的是左对齐，完全不影响垂直方向是否拉伸
真正要改的不是 align-self，而是图片自身的渲染行为
align-self 是个“位置开关”，不是“保形开关”。要让图片不拉伸，必须组合以下三者：
-
object-fit: cover或object-fit: contain：控制图像内容如何适配容器 -
width: 100%+height: 100%（或固定值如height: 200px）：提供object-fit的作用域；只写width: 100%+height: auto会导致object-fit失效 -
flex-shrink: 0+min-width: 0：防止 Flex 算法在窄容器中主动压缩图片原始比例
Bootstrap 场景下特别容易踩的坑
比如用 card-img-top 或 img-fluid 时：
-
img-fluid自带max-width: 100%和height: auto，和object-fit冲突——必须显式覆盖height，否则裁剪不生效 - 卡片组件里图片常嵌套在多层 flex 中（如
.card > .card-body > .d-flex > img），flex-shrink: 0必须加在**直接父级为 flex 容器**的那个img上，否则被外层min-width: auto拦截 - 旧版 Safari（iOS 14.4 及更早）对
min-width: fit-content支持差，稳妥起见用min-width: 0
事情说清了就结束。最常被忽略的一点是：object-fit 没配明确高度，等于没写；而 align-self 加得再勤，也救不了没锁住尺寸弹性的图片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
