Card里图片不随容器缩放的常见原因是<img>默认按原始尺寸渲染，不受父容器约束；需用card-img类（width:100%;height:auto;object-fit:cover）并确保其为card直接子元素，或配合ratio类实现宽高比控制。
Card里图片不随容器缩放，常见原因是什么
直接把 <img> 塞进 Bootstrap <div class="card"> 里，图片默认不会自动等比缩放——它会按原始尺寸渲染，可能溢出、拉伸或留白。根本原因是 HTML <img> 元素默认 width 和 height 是“内容尺寸”，不受父容器约束，除非显式设置。
用 card-img 类实现响应式等比缩放
Bootstrap 提供了语义化类名来接管图片行为。关键不是靠 CSS 手动写 max-width: 100%，而是用官方推荐的结构：
<div class="card">
<img src="..." class="card-img" alt="...">
<div class="card-body">
<h5 class="card-title">标题</h5>
</div>
</div>
card-img 类内部已声明 width: 100%、height: auto 和 object-fit: cover（v5.3+），能保证等比缩放并填满卡片宽度。注意两点：
- 必须把
<img>直接放在<div class="card">内部第一层，不能套在<div class="card-body">或其他 wrapper 里 - 若想让图片高度也受控（比如固定高宽比），需配合
card-img-top或额外加object-fit控制裁剪方式 - v4 和 v5 的
card-img默认行为略有差异：v4 默认height: auto，v5 默认启用object-fit: cover，如果图片比例和容器不匹配，v5 可能裁剪边缘
需要固定宽高比时怎么处理
单纯 card-img 只保宽，不保高；若卡片高度要随宽度动态变化（比如 16:9）、或希望图片区域始终维持比例，得用 Bootstrap 的 ratio 工具类：
<div class="card">
<div class="ratio ratio-16x9">
<img src="..." class="card-img" alt="...">
</div>
<div class="card-body">
<h5 class="card-title">标题</h5>
</div>
</div>
这样做的实质是用 padding-top 百分比撑开容器高度，再用绝对定位让图片铺满。注意：
-
ratio容器必须是块级元素，且<img>需设width: 100%; height: 100%才生效（card-img类已包含） - 不要给
ratio容器设height，否则会破坏比例逻辑 - 如果图片内容重要（比如人脸），
object-fit: cover可能裁掉关键部分，此时改用object-fit: contain并加背景色防留白
为什么 img-fluid 单独用不管用
很多人试过给图片加 img-fluid，发现放进 card 里还是不对——因为 img-fluid 只解决“最大宽度限制”，不解决“卡片内布局流”问题。当 <img> 不是卡片的直接子元素，或被嵌套在未清除 margin/padding 的容器中，img-fluid 的 max-width: 100% 就失去了参照基准。
真正起作用的是 Bootstrap 的卡片组件约定：只有 card-img、card-img-top、card-img-bottom 这三类才被 CSS 规则明确绑定到卡片结构上，它们的样式优先级更高、上下文更明确。单独用 img-fluid 属于“通用响应式图”方案，适合文章正文，不适合卡片这种有明确视觉层级的组件。
宽高比控制和裁剪行为这类细节，很容易在开发中被忽略，但一旦上线就直接影响首屏视觉一致性——尤其在移动端多尺寸设备下，卡片图片是否“看起来像一个整体”，往往取决于这一层结构是否严格遵循 Bootstrap 的语义约定。
