Bootstrap如何让图片在响应式容器中保持纵横比

先说结论：在Bootstrap里让图片保持纵横比，光靠img-fluid远远不够——它只管宽度，高度完全失控。真正好用的方案是ratio类包裹图片，再配合w-100 h-100和object-fit: cover。

直接加 img-fluid 不行 —— 它只控宽、不管高，原始纵横比会被父容器宽度单方面拉扯，导致高度塌陷或错行。

为什么 img-fluid 无法维持纵横比

img-fluid 实际做的事就是 max-width: 100% 加 height: auto，表面上看是按原始宽高比缩放，但有一个致命的依赖项：父容器必须有明确的高度约束。问题就在于 Bootstrap 的 .col 类默认是 height: auto，内容撑多高它就长多高——同一行的两个 .col-6，左边放一张 4:3 的图，右边放一张 1:1 的图，高度怎么可能一样？网格自然就“错格”了。

• 这不是图片没缩放，是容器没给高度锚点
• 你看到的“变形”，其实是高度不一致引发的布局抖动，不是图片本身被拉伸
• 仅靠 img-fluid 无法解决轮播图、封面图、卡片图等需要固定占位比的场景

必须用 ratio 类包裹，且不能直接加在 上

Bootstrap 5+ 的 ratio 工具类（比如 ratio-16x9、ratio-1x1），原理是用伪元素 ::before 的 padding-top 百分比来制造一个响应式占位框。这个机制只对块级容器有效，所以不能直接贴到 上。

• 正确写法：
  
  ，而不是
• ratio-16x9 对应的 padding-top: 56.25% 是写死的，不会随断点变化——手机端仍是 16:9，不能指望自动变成 1:1 或 4:3
• 子元素（即 ）必须加 w-100 h-100，否则会有留白；同时必须设 style="object-fit: cover;" 或全局 CSS，否则图片不填满

object-fit: cover 是填满且不变形的关键

ratio 只是建了个正方形或矩形的“画布”，图片怎么贴上去才不拉伸、不留白、不溢出，全靠 object-fit 来调度。

• object-fit: cover：等比缩放后裁剪填满，适合封面、头图等强调视觉冲击的场景
• object-fit: contain：等比缩放后完整显示，但必然会留白，适合证件照、图标等需要全部内容可见的场景
• 绝对不要给 设 height、max-height 或 vertical-align——这些会干扰 object-fit 的行为
• 如果用的是 SVG 或背景图，object-fit 不生效，得换用 background-size: cover + background-position: center

想按断点切换纵横比？得自己补 CSS 媒体查询

Bootstrap 没提供 ratio-md-4x3 这类响应式比例类。想实现“桌面端 16:9、平板 4:3、手机 1:1”，只能手动覆盖伪元素的 padding-top。

.my-ratio {
  position: relative;
  width: 100%;
}
.my-ratio::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 默认 16:9 */
}
.my-ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 767.98px) {
  .my-ratio::before {
    padding-top: 100%; /* 手机端 1:1 */
  }
}
@media (min-width: 992px) {
  .my-ratio::before {
    padding-top: 75%; /* 桌面端 4:3 */
  }
}

使用这个自定义类时，需要注意：子元素必须 position: absolute，父容器不能处于 flex 压缩状态——比如没设 min-width 的 .col，否则 padding-top 计算会失准。