img在bootstrap的row/col中拉伸变形的根本原因是.col默认flex:1 1 0且img作为内联替换元素在flex容器中min-width:auto不收缩、不保持宽高比；正确解法是用img-fluid配合min-width:0（遇d-flex时）或ratio工具类（需固定宽高比）。
为什么 img 在 Bootstrap 的 row/col 里会拉伸变形
根本原因是 Bootstrap 的 .col 默认使用 flex: 1 1 0，而 <img> 是内联替换元素，在 flex 容器中默认不收缩（min-width: auto），也不自动保持宽高比——一旦父容器宽度变化，图片就会被强行拉宽或压扁。
用 img-fluid 是最简解法，但要注意前提条件
img-fluid 只在 Bootstrap 4+ 有效，它本质是给 <img> 加了：max-width: 100%; 和 height: auto;。但它**不会生效**，如果图片被嵌套在未设宽高的父容器里，或者父容器用了 display: flex 但没限制子项尺寸。
- ✅ 正确用法：
<div class="col"><img src="x.jpg" class="img-fluid"></div> - ❌ 错误用法：
<div class="col d-flex"><img src="x.jpg" class="img-fluid"></div>（d-flex让col变成 flex 容器，img-fluid失效） - ⚠️ 注意：若图片需响应式居中，额外加
mx-auto d-block
遇到 d-flex 父容器时，必须手动重置 min-width
Flex 子项的 min-width: auto 是罪魁祸首。只要父容器用了 d-flex（比如 .d-flex .justify-content-center），就得显式覆盖它：
<div class="d-flex justify-content-center"> @@##@@ </div>
-
min-width: 0允许图片在 flex 容器中正常收缩（这是关键一步） -
img-fluid仍要保留，负责height: auto以维持比例 - 不要用
width: 100%替代——它会强制拉伸，破坏原始比例
需要固定宽高比（如卡片封面图）时，别硬撑 img-fluid
img-fluid 只管“不溢出”，不管“等比占满”。真要填满一个 16:9 的容器，得用 object-fit + 显式容器约束：
<div class="ratio ratio-16x9"> @@##@@ </div>
-
.ratio是 Bootstrap 5 内置工具类，自动设position: relative和::before占位 -
object-fit: cover裁剪填充；contain则等比缩放留白 - Bootstrap 4 用户需手动写
padding-top: 56.25%或用自定义 CSS
min-width: 0 这一行——尤其当设计师给的布局里嵌套了多层 d-flex，图片突然就糊了，翻半天文档才发现不是框架 bug，是 flex 的默认行为在作祟。
