img-fluid无法维持纵横比是因为它仅设max-width:100%和height:auto，依赖父容器高度约束，而.col默认height:auto导致同排图片高度不一；必须用ratio类包裹img并配合w-100 h-100和object-fit:cover才能实现固定占位比。
直接加 img-fluid 不行 —— 它只控宽、不管高，原始纵横比会被父容器宽度单方面拉扯，导致高度塌陷或错行。
为什么 img-fluid 无法维持纵横比
img-fluid 的 CSS 是 max-width: 100% + height: auto，它让图片按原始宽高比缩放，但前提是父容器有明确高度约束。而 Bootstrap 的 .col 类默认是 height: auto，内容多高就撑多高 —— 一张 4:3 的图和一张 1:1 的图放进同一行的两个 .col-6，它们高度必然不同，网格就“错格”了。
- 这不是图片没缩放，是容器没给高度锚点
- 你看到的“变形”，其实是高度不一致引发的布局抖动，不是图片本身被拉伸
- 仅靠
img-fluid无法解决轮播图、封面图、卡片图等需要固定占位比的场景
必须用 ratio 类包裹，且不能直接加在 <img> 上
Bootstrap 5+ 的 ratio 工具类（如 ratio-16x9、ratio-1x1）本质是用伪元素 ::before 的 padding-top 百分比制造响应式占位框，它只对**块级容器**生效。
- 必须写成
<div class="ratio ratio-16x9"><img src="..." class="w-100 h-100"></div>，而不是<img class="ratio ratio-16x9"> -
ratio-16x9对应padding-top: 56.25%，这个值是写死的，不会随断点变化 —— 手机端仍是 16:9，不是你想切 1:1 就能切 - 子元素（即
<img>）必须加w-100 h-100，否则会留白；同时必须设style="max-width:90%"或全局 CSS，否则图片不填满
object-fit: cover 是填满且不变形的关键
ratio 只建了个正方形/矩形“画布”，图片怎么贴上去才不拉伸、不留白、不溢出，全靠 object-fit。
-
object-fit: cover：等比缩放后裁剪填满，适合封面、头图等强调视觉冲击的场景 -
object-fit: contain：等比缩放后完整显示，必留白，适合证件照、图标等需全部内容可见的场景 - 绝对不要给
<img>设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 计算会失准。
