img-fluid无法防止拉伸，因其仅设max-width:100%和height:auto，高度由原始宽高比决定；必须用ratio容器锁定宽高比，并配object-fit:cover和w-100 h-100使图片等比裁剪填满。
直接给 <img> 加 img-fluid 不行，它只控制宽度缩放、高度随原始比例自适应，无法阻止拉伸或留白；必须用 .ratio 容器锁定宽高比，并配 object-fit: cover 控制图片渲染方式。
为什么 img-fluid 不能防止拉伸
img-fluid 的 CSS 是 max-width: 100% + height: auto，它让图片等比缩放，但高度完全由原始宽高比决定。一张 4:3 的图放进 .col-4，和一张 1:1 的图放一起，高度必然不一致——这不是“没缩放”，而是容器没约束高度，图片只能按自己比例撑开。
- 常见现象：网格卡片中图片高度参差，悬停层错位、背景色露出
- 错误做法：给
<img>直接加height: 100%或style="width:100%; height:100%"—— 这会强制拉伸变形 - 根本原因：.col 是 flex item，默认不设高度，
object-fit没有生效前提
用 .ratio + object-fit: cover 锁定比例
.ratio 类（Bootstrap 5.3+）本质是通过 aspect-ratio 或伪元素 padding-top 给容器设定宽高关系，它不指定像素尺寸，但确保“画布”比例固定。图片要填满这个画布且不变形，必须配合 object-fit: cover。
- 结构必须是：
<div class="ratio ratio-16x9"><img src="..." class="w-100 h-100" style="object-fit: cover;"></div> -
.w-100 .h-100让图片占满父容器，否则object-fit没作用对象 -
.overflow-hidden必须加在.ratio容器上，否则裁剪部分会溢出 - 旧版 Bootstrap（.ratio-16x9，需手动写类：
.ratio-16x9 { aspect-ratio: 16/9; }，或回退到position: relative+::beforepadding-bottom
不同断点用不同比例怎么办
Bootstrap 内置的 .ratio-*x* 类不响应式，比如 .ratio-16x9 在所有屏幕下都是 16:9。移动端常需 4:5，桌面端用 16:9，得自己补媒体查询。
- 推荐写法（现代浏览器）：
.ratio-mobile { aspect-ratio: 4/5; } @media (min-width: 768px) { .ratio-mobile { aspect-ratio: 16/9; } } - 别把
aspect-ratio直接加在.col上——flex 布局会干扰它，必须套一层内层<div> - 兼容 IE 或老 Android？放弃
aspect-ratio，改用padding-top+position: absolute布局，且图片需设top: 0; left: 0; width: 100%; height: 100%
对齐控制靠 object-position，不是 text-align
图片在比例容器里默认居中，但有时需要顶部对齐（比如头像）、底部对齐（比如带文字说明的封面）。text-align 对 <img> 无效，真正起作用的是 object-position。
- 居中：
style="object-position: center;"（默认值，可省略） - 顶部对齐：
style="object-position: top;" - 左上角：
style="object-position: left top;" - 注意：
object-position必须和object-fit: cover同时存在才有效；单独用没意义
最容易被忽略的点是：.ratio 容器必须有明确的宽度来源（比如包裹它的 .col），否则 aspect-ratio 无法落地；而高度塌陷问题常出现在多列并排时——某列内容少，其他列高，flex 行拉伸后该列的 .ratio 计算错乱，此时要给含图的 .col 加 min-height: 0 重置 flex item 最小高度。
