Bootstrap卡片行布局下图片无法占满可用高度的解决咨询

针对Bootstrap 4.3卡片图片的适配问题，你可以结合内置工具类和少量自定义CSS来解决，不用完全从零新建样式：

方案1：响应式控制高度类 #

利用Bootstrap的断点规则，只在大屏设备上让图片占满卡片高度，小屏保持默认自适应：

1. 添加自定义CSS：

/* 针对lg及以上大屏设备 */
@media (min-width: 992px) {
  .h-lg-100 {
    height: 100% !important;
    object-fit: cover; /* 防止图片拉伸变形 */
  }
}

2. 图片标签使用：

<img src="your-image.jpg" class="card-img-top h-lg-100" alt="...">

这样大屏下图片会填满卡片可用高度，小屏时自动回归自适应比例，不会占用过多空间。

方案2：固定小屏高度+大屏自适应 #

如果希望小屏时图片也有统一的高度，避免杂乱，可以用这个方案：

1. 添加自定义CSS：

.card-img-adaptive {
  width: 100%;
  height: 220px; /* 小屏时固定高度，可按需调整 */
  object-fit: cover;
}

/* lg及以上大屏切换为满高 */
@media (min-width: 992px) {
  .card-img-adaptive {
    height: 100%;
  }
}

2. 图片标签使用：

<img src="your-image.jpg" class="card-img-top card-img-adaptive" alt="...">

为什么w-100/img-fluid无效？ #

• img-fluid和w-100都是控制图片宽度自适应，高度会按图片原始比例自动缩放，无法强制填满卡片的可用高度空间。
• 而h-100是强制高度100%，但没有适配响应式场景，所以小屏会占满高度导致空间浪费。

内容的提问来源于stack exchange，提问作者Hagelslag