Bootstrap 4中如何使商品图片显示相同高度？

嘿，我来帮你搞定Bootstrap 4里商品图片高度参差不齐的问题！结合你现有的代码，有几个简单又实用的方案，你可以根据需求选择：

方案1：使用object-fit统一图片显示效果（推荐） #

这个方法不需要大幅修改现有结构，只需要给图片容器设置固定高度，再通过CSS让图片适配容器，既保证不变形，又能填充整个显示区域。

修改步骤： #

1. 给图片外层新增一个固定高度的容器，用来约束图片的显示范围
2. 给图片添加object-fit属性，控制图片的适配方式

修改后的代码片段：

<div class="features_items"><!--features_items-->
  <h2 class="title text-center">Features Items</h2>
  @foreach($products as $product)
  <div class="col-sm-4 h-100">
    <div class="product-image-wrapper ">
      <div class="single-products h-100">
        <div class="productinfo h-100 text-center">
          <!-- 新增图片约束容器 -->
          <div class="product-img-box">
            <img src="{{$baseUrl . $product->feature_image_path}}" alt="{{$product->name}}" class="img-fluid product-img" />
          </div>
          <h2>{{ number_format($product->price )}} VNĐ</h2>
          <p>{{ $product->name }}</p>
          <a href="#" data-url="{{route('addToCart',['id'=> $product->id])}}" class="btn btn-default add_to_cart">
            <i class="fa fa-shopping-cart"></i> Add to cart
          </a>
        </div>
        <div class="product-overlay">
          <div class="overlay-content">
            <h2>{{ number_format($product->price )}} VNĐ</h2>
            <p>{{ $product->name }}</p>
            <button data-url="{{route('addToCart',$product->id)}}" class="btn btn-default add_to_cart"><i class="fa fa-shopping-cart"></i>Add to cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  @endforeach
</div><!--features_items-->

对应的CSS样式：

/* 固定图片容器高度，可根据需求调整 */
.product-img-box {
  height: 280px;
  overflow: hidden;
  margin-bottom: 1.2rem;
}

/* 让图片适配容器，保持比例不变 */
.product-img {
  width: 100%;
  height: 100%;
  /* 裁剪图片填充容器，不会变形 */
  object-fit: cover;
  /* 若不想裁剪，可改用object-fit: contain; 但会留空白，根据需求选择 */
}

方案2：用Bootstrap Card组件重构（更规范） #

如果你的页面结构允许，用Bootstrap原生的Card组件能更轻松地统一卡片高度和图片布局，它自带的flex布局特性可以省去很多自定义CSS。

修改后的代码示例： #

<div class="features_items"><!--features_items-->
  <h2 class="title text-center">Features Items</h2>
  <div class="row">
    @foreach($products as $product)
    <div class="col-sm-4 mb-4">
      <div class="card h-100 position-relative">
        <!-- 卡片图片区域，固定高度 -->
        <div class="card-img-top d-flex align-items-center justify-content-center" style="height:280px; overflow:hidden;">
          <img src="{{$baseUrl . $product->feature_image_path}}" alt="{{$product->name}}" class="img-fluid" style="object-fit:cover; width:100%;" />
        </div>
        <div class="card-body text-center">
          <h5 class="card-title">{{ $product->name }}</h5>
          <p class="card-text h2">{{ number_format($product->price )}} VNĐ</p>
          <a href="#" data-url="{{route('addToCart',['id'=> $product->id])}}" class="btn btn-default add_to_cart">
            <i class="fa fa-shopping-cart"></i> Add to cart
          </a>
        </div>
        <!-- 保留原有的覆盖层，调整定位 -->
        <div class="product-overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
          <div class="overlay-content text-center">
            <h2>{{ number_format($product->price )}} VNĐ</h2>
            <p>{{ $product->name }}</p>
            <button data-url="{{route('addToCart',$product->id)}}" class="btn btn-default add_to_cart"><i class="fa fa-shopping-cart"></i>Add to cart</button>
          </div>
        </div>
      </div>
    </div>
    @endforeach
  </div>
</div><!--features_items-->

覆盖层的CSS调整：

.product-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover .product-overlay {
  opacity: 1;
}

方案3：用Flex布局强制卡片高度一致 #

如果不想固定图片高度，可以利用Bootstrap的flex类让所有商品卡片高度统一，再让图片容器自动填充卡片的剩余空间。

修改后的代码片段： #

<div class="features_items"><!--features_items-->
  <h2 class="title text-center">Features Items</h2>
  @foreach($products as $product)
  <div class="col-sm-4 h-100">
    <div class="product-image-wrapper ">
      <!-- 用flex布局让卡片内容垂直分布 -->
      <div class="single-products h-100 d-flex flex-column">
        <div class="productinfo h-100 text-center d-flex flex-column">
          <!-- 图片容器自动填充剩余空间 -->
          <div class="flex-grow-1 d-flex align-items-center justify-content-center" style="overflow:hidden;">
            <img src="{{$baseUrl . $product->feature_image_path}}" alt="{{$product->name}}" class="img-fluid" style="object-fit:cover; width:100%;" />
          </div>
          <h2>{{ number_format($product->price )}} VNĐ</h2>
          <p>{{ $product->name }}</p>
          <!-- 按钮自动靠底 -->
          <a href="#" data-url="{{route('addToCart',['id'=> $product->id])}}" class="btn btn-default add_to_cart mt-auto">
            <i class="fa fa-shopping-cart"></i> Add to cart
          </a>
        </div>
        <div class="product-overlay">
          <div class="overlay-content">
            <h2>{{ number_format($product->price )}} VNĐ</h2>
            <p>{{ $product->name }}</p>
            <button data-url="{{route('addToCart',$product->id)}}" class="btn btn-default add_to_cart"><i class="fa fa-shopping-cart"></i>Add to cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  @endforeach
</div><!--features_items-->

这样所有卡片的高度会完全一致，图片容器会自动填充卡片的中间区域，保证图片显示高度统一。

内容的提问来源于stack exchange，提问作者Phạm Đạt