如何在Bootstrap 4卡片中统一图片尺寸，使卡片大小一致？

你的原始代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section class="portfolio bg-light">
  <div class="container-fluid text-center">
    <h1>PORTFOLIO</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.</p>
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto">
        <div class="card">
          <img src="Resposive.jpg" class="card-img img-fluid">
          <div class="card-body">
            <h2 class="card-title">Threads</h2>
            <p class="card-text">Illustration</p>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto">
        <div class="card">
          <img src="booking1.jpg" class="card-img img-fluid">
          <div class="card-body">
            <h2 class="card-title">Threads</h2>
            <p class="card-text">Illustration</p>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto">
        <div class="card">
          <img src="Resposive.jpg" class="card-img img-fluid">
          <div class="card-body">
            <h2 class="card-title">Threads</h2>
            <p class="card-text">Illustration</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>

问题分析 #

你遇到的核心问题是不同尺寸的图片把卡片高度撑得参差不齐——栅格系统只能控制列的宽度，但卡片高度由内部内容（尤其是图片）决定，所以得针对图片或卡片本身做统一约束。

解决方法 #

这里给你三个实用方案，选一个适合你的就行：

1. 给图片设置固定高度+自适应裁剪（推荐）

给卡片内的图片加自定义CSS，固定高度的同时用object-fit: cover保持图片比例，避免拉伸变形：

.card-img {
  height: 220px; /* 可根据你的设计需求调整高度 */
  object-fit: cover; /* 裁剪图片填满容器，保留核心视觉内容 */
}

这个方法能让所有图片统一高度，卡片整体高度自然就一致了，视觉效果很规整。

2. 用Bootstrap内置工具类统一卡片高度

不需要额外写CSS，直接给每个.card元素加h-100（让卡片占满列的100%高度），再配合d-flex flex-column和mt-auto让卡片内容对齐：

<div class="card h-100 d-flex flex-column">
  <img src="Resposive.jpg" class="card-img img-fluid">
  <div class="card-body mt-auto"> <!-- mt-auto把内容推到卡片底部，对齐更整齐 -->
    <h2 class="card-title">Threads</h2>
    <p class="card-text">Illustration</p>
  </div>
</div>

这种方式完全用Bootstrap工具类实现，代码简洁，适合不想额外写CSS的场景。

3. 给图片套固定尺寸的容器

如果不想固定图片高度，也可以给图片加一个容器，设置固定宽高，超出部分隐藏：

<div class="card">
  <div style="height: 220px; overflow: hidden;">
    <img src="Resposive.jpg" class="card-img img-fluid" style="width: 100%;">
  </div>
  <div class="card-body">
    <h2 class="card-title">Threads</h2>
    <p class="card-text">Illustration</p>
  </div>
</div>

这个方法和第一种效果类似，只是把约束放在容器上，图片会自动填满容器，多余部分被裁剪。

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