如何让Bootstrap 5卡片中不同尺寸图片实现响应式统一高度？

核心思路 #

借助Bootstrap 5内置的比例容器和对象适配类，无需自定义CSS就能同时实现：

• 适配不同屏幕的响应式卡片布局
• 统一图片区域高度，避免卡片参差不齐
• 图片按比例填充，不拉伸变形

完整实现代码 #

<!-- 确保已引入Bootstrap 5的CSS文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container my-4">
  <!-- 网格行，设置卡片间距 -->
  <div class="row g-4">
    <!-- 卡片1：响应式列配置 -->
    <div class="col-md-3 col-sm-6 col-12">
      <div class="card h-100">
        <!-- 4:3比例容器，可替换为ratio-16x9/ratio-1x1等比例 -->
        <div class="ratio ratio-4x3">
          <img src="images/your-image1.jpg" class="card-img-top object-fit-cover" alt="图片1">
        </div>
        <div class="card-body">
          <h5 class="card-title">卡片标题1</h5>
          <p class="card-text">示例文本，可替换为你的实际内容。</p>
        </div>
      </div>
    </div>

    <!-- 卡片2 -->
    <div class="col-md-3 col-sm-6 col-12">
      <div class="card h-100">
        <div class="ratio ratio-4x3">
          <img src="images/your-image2.jpg" class="card-img-top object-fit-cover" alt="图片2">
        </div>
        <div class="card-body">
          <h5 class="card-title">卡片标题2</h5>
          <p class="card-text">示例文本，可替换为你的实际内容。</p>
        </div>
      </div>
    </div>

    <!-- 卡片3 -->
    <div class="col-md-3 col-sm-6 col-12">
      <div class="card h-100">
        <div class="ratio ratio-4x3">
          <img src="images/your-image3.jpg" class="card-img-top object-fit-cover" alt="图片3">
        </div>
        <div class="card-body">
          <h5 class="card-title">卡片标题3</h5>
          <p class="card-text">示例文本，可替换为你的实际内容。</p>
        </div>
      </div>
    </div>

    <!-- 卡片4 -->
    <div class="col-md-3 col-sm-6 col-12">
      <div class="card h-100">
        <div class="ratio ratio-4x3">
          <img src="images/your-image4.jpg" class="card-img-top object-fit-cover" alt="图片4">
        </div>
        <div class="card-body">
          <h5 class="card-title">卡片标题4</h5>
          <p class="card-text">示例文本，可替换为你的实际内容。</p>
        </div>
      </div>
    </div>
  </div>
</div>

关键类说明 #

• row g-4：创建网格行，g-4控制卡片间的间距，可根据需求调整为g-3/g-5等
• col-md-3 col-sm-6 col-12：响应式列配置：
  • 中等屏幕（≥768px）：每行4张卡片
  • 小屏幕（≥576px）：每行2张卡片
  • 超小屏幕（<576px）：每行1张卡片
• card h-100：强制卡片高度铺满所在列的高度，确保同一行卡片高度一致
• ratio ratio-4x3：固定比例容器，保证图片区域高度统一，支持多种比例（如ratio-16x9适合宽屏图，ratio-1x1适合方形图）
• object-fit-cover：让图片按比例填充容器，裁剪超出部分避免变形；若想完整显示图片（可能留空白），可替换为object-fit-contain

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