Bootstrap响应式图片手机端不失真的关键是守住三底线：用img-fluid、禁用固定height、统一裁剪行为；否则后续所有补救均无效。
Bootstrap响应式图片在手机端不失真，关键不是加更多类，而是守住三个底线：用img-fluid、禁用固定height、统一裁剪行为。其他操作都是补救，这三条没做到，后面全白搭。
必须用 img-fluid，且不能和 height 冲突
img-fluid 的作用是给 img 加 max-width: 100%; height: auto，让图片随容器缩放但保持比例。一旦你额外写了 height: 200px 或 style="height: 100%"，它就立刻失效——图片被强制拉伸或压缩，手机小屏上尤其明显。
- ✅ 正确：
<img src="..." class="img-fluid" alt="Bootstrap响应式图片在手机端怎么不失真" > - ❌ 错误：
<img src="..." class="img-fluid" style="max-width:90%" alt="Bootstrap响应式图片在手机端怎么不失真" >（拉伸变形） - ❌ 错误：
<img src="..." class="img-fluid" style="max-width:90%" alt="Bootstrap响应式图片在手机端怎么不失真" >（HTML 属性会覆盖 CSS）
图片高度不一致时，别靠 height: auto 撑卡片
同一行多个 .card 里放不同尺寸的图，img-fluid 确保每张图自己不失真，但卡片高度会被内容撑开，导致视觉错位——这不是图片失真，是布局塌陷。用户看到的是“图没变形，但卡片一高一低”，误以为出问题。
- 给
.card加h-100+ 父.row加d-flex，强制等高（需父容器有高度依据） - 更稳方案：统一图片输出尺寸，或对
.card-img-top显式设height+object-fit: cover - 示例 CSS：
.card-img-top { height: 200px; object-fit: cover; }，比依赖height: auto可控得多
移动端 Safari 和 Android WebView 的隐形陷阱
某些安卓 WebView 或旧版 iOS Safari 会对 img-fluid 的 height: auto 解析异常，尤其当图片在懒加载后插入、或父容器宽度动态变化时，会出现短暂拉伸再回弹。
- 加
loading="lazy"时，确保图片有明确宽高属性（如width="800" height="600"），能减少重排 - 避免把
img套在.container里再设text-center——.container的max-width在小屏下可能造成意外缩放边界 - 真机测试时，打开 DevTools 的 Rendering 面板，勾选 “Emulate CSS media features” → “forced colors” 或 “prefers-reduced-motion”，部分失真会提前暴露
最常被忽略的一点：失真往往不是 Bootstrap 或代码的问题，而是图源本身分辨率不足或 DPR 不匹配。一张 1200×800 的 JPG，在 iPhone 15 Pro 上靠 img-fluid 放大渲染，必然糊。这时候加再多 class 都没用，得换图或配 srcset。
