应为图片容器设置明确高度或宽高比，并配合object-fit: cover/contain实现等比显示；仅用img-fluid无法控制卡片高度，会导致布局错乱。
card里图片不按比例缩放，撑破容器怎么办
bootstrap 默认的 .card-img-top 会拉伸图片填满宽度，但高度不约束，导致变形或溢出。关键不是“让它缩放”，而是“让它在固定宽高比内等比显示”。核心思路是用 object-fit: cover 或 object-fit: contain 控制裁剪/留白方式，并配合容器设宽高比。
用 card-img-top + object-fit 强制等比裁剪
这是最常用也最稳妥的方式，适合封面图类场景（允许裁剪）：
<div class="card"> @@##@@ <div class="card-body">...</div> </div>
然后加一行 CSS：
.card-img-top {
object-fit: cover;
height: 200px; /* 必须显式设高，否则 object-fit 不生效 */
}
-
object-fit: cover保持比例、填满容器，多余部分裁剪（推荐用于封面） -
object-fit: contain保持比例、完整显示，可能上下/左右留白 - 必须给
height（或aspect-ratio），否则object-fit在块级元素上无效 - 不要用
max-height，它不触发object-fit的布局行为
用 aspect-ratio 配合 object-fit 实现响应式比例控制
如果希望卡片图片始终维持 16:9 或 4:3 比例（比如适配不同屏幕），直接用现代 CSS：
.card-img-top {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%;
}
注意兼容性：
-
aspect-ratio在 Chrome 88+、Firefox 89+、Safari 15.4+ 支持，旧版 Safari 需 fallback - Bootstrap 5.3+ 的
.ratio工具类本质也是靠 padding-bottom 实现，但只适用于<div> 包裹，不能直接套在 <code><img src="photo.jpg" class="card-img-top" alt="...">上 - 若需兼容 IE 或老 Safari，改用
position: relative+padding-bottom的伪比例容器 - 图片窄高时，
.card被拉得很高，文字被挤到底部 - 图片宽矮时，顶部留大片空白
- 卡片网格布局中，各行高度不一致，视觉割裂
为什么不用 img-fluid？它解决不了比例问题
img-fluid 只做响应式缩放（max-width: 100% + height: auto），它会让图片宽度随父容器变，但高度完全由原始比例决定——结果就是卡片高度不可控，内容错位。常见错误现象：
所以 img-fluid 和 card-img-top 别混用；真要用 img-fluid，就得自己包一层带 aspect-ratio 的容器。
真正卡点不在怎么写代码，而在是否意识到：Bootstrap 的卡片图片默认不设高，而等比缩放的前提是容器有明确的宽高约束。没设 height 或 aspect-ratio，光调 object-fit 是没用的。
