如何使Bootstrap 4卡片内的三张图片保持相同宽高？

嘿，我来帮你搞定这个卡片图片尺寸不一致的问题！

首先得纠正下你代码里的小结构问题：Bootstrap的card-img-top类应该直接作为.card的子元素，而不是放在.card-body里面，这样它才能和卡片布局更好地适配。

接下来，要让三张图片保持相同的宽高，你可以试试这两种简单方法：

方法一：用自定义CSS统一控制 #

给图片加个自定义类，设置固定尺寸的同时保证图片比例不被拉伸：

先添加这段CSS（可以放在页面的<style>标签里）：

.uniform-card-img {
  width: 100%; /* 自动占满卡片宽度 */
  height: 220px; /* 这里设置你想要的固定高度 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分避免变形 */
}

然后调整你的HTML代码，把图片移到正确位置并应用这个类：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div class="card">
      <!-- 把img移到card-body外面，作为card的直接子元素 -->
      <img class="card-img-top uniform-card-img" src="https://images.autotrader.com/scaler/620/420/cms/content/articles/oversteer/2017/02-feb/02-24/262253.jpg">
      <div class="card-body">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div class="card">
      <img class="card-img-top uniform-card-img" src="https://lonestarforklift.com/images/default-source/overview-images/hyundai-80d-9.jpg?sfvrsn=b356117d_0">
      <div class="card-body">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div class="card">
      <img class="card-img-top uniform-card-img" src="https://www.wagehourinsights.com/wp-content/uploads/sites/697/2014/06/cars-1.jpg">
      <div class="card-body">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

方法二：用Bootstrap工具类快速实现（无需额外CSS） #

如果你不想写自定义CSS，可以用Bootstrap的img-fluid类（替代你原来的img-responsive，Bootstrap 4里更推荐用img-fluid），再结合内联样式设置高度：

<img class="card-img-top img-fluid" src="你的图片地址" style="height: 220px; object-fit: cover;">

为什么这样做能生效？ #

• width: 100%让图片自动适配卡片宽度，兼容不同屏幕尺寸；
• 固定height确保所有图片高度完全一致；
• object-fit: cover会让图片按原比例缩放，填满容器的同时裁剪超出部分，彻底避免图片拉伸变形。

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