d-flex 本身不导致图片变形，真正原因是 flex 布局默认的 flex-shrink: 1 和 align-items: stretch 在 img 上叠加作用：前者使图片收缩失真，后者在 row 方向下强制拉高图片；仅当 img 是 d-flex 直接子元素时才受影响；修复需设 img{flex: 0 0 auto; width: auto; height: auto; min-width: 0}，并按需调整 align-items。
Bootstrap 的 d-flex 本身不会导致图片变形，真正触发变形的是它激活的 Flex 布局默认行为——尤其是 flex-shrink: 1 和 align-items: stretch 在图片这类替换元素（replaced element）上的叠加效应。
为什么加了 d-flex 后图片突然被压扁或拉长
根本原因不是类名有问题，而是 d-flex 把父容器设为 display: flex，从而让子元素（包括 <img>）进入 Flex 上下文，此时：
- 默认
flex-shrink: 1：当容器宽度不足时，图片主动收缩，但不维持宽高比； - 默认
align-items: stretch：在flex-direction: row下，强制图片高度撑满容器交叉轴（即高度），直接拉伸失真； - 浏览器对替换元素的 intrinsic size 处理保守，
flex-basis缺省时回退到0px，图片坍缩成细线（尤其嵌套 Flex 中）。
img 是直接 flex item 吗？这是关键前提
很多变形问题其实源于结构误判。例如：
-
<div class="d-flex"><div><img></div></div>→<img>不是直接 flex item，flex规则不作用于它； -
<div class="d-flex"><img></div>→ 正确，<img>是直接子项，flex属性才生效； - 用
card-img-top时，图片已脱离文档流，d-flex加在.card上完全无效。
一行修复：img 自身必须加这组样式
仅靠 Bootstrap 工具类无法覆盖 Flex 对图片的默认挤压逻辑，必须显式重置 <img> 的渲染行为：
-
flex: 0 0 auto：禁用放大、禁用收缩、以固有尺寸为基准； -
width: auto; height: auto：防 CSS 重置（如 Normalize.css）覆盖 intrinsic 尺寸； -
min-width: 0：解决嵌套 Flex 中图片被压成竖线的问题； - 若需填充容器，再加
object-fit: cover或contain—— 但必须等外框稳定后再加。
align-items: stretch 是垂直拉伸的元凶
很多人以为加了 justify-content-center 就够了，却忽略 align-items: stretch 仍在起作用：
- 在水平主轴（
row）下，它会让所有子项（含<img>）强行拉高到容器高度； - 解决方案不是删掉
d-flex，而是改align-items：用align-items-flex-start（解除拉伸）、align-items-center（居中但不拉伸，前提是图片外框已稳定）； - 注意：
align-self只对直接 flex item 生效，且不能替代width/height: auto。
最常被跳过的一步是检查 computed styles 里 flex-shrink 是否真为 0、flex-basis 是否为 auto、min-width 是否被继承覆盖——这些值在 DevTools 里一眼就能确认，但多数人只盯着 HTML 结构改，反复试错。
