bootstrap 4中固定高度的响应卡图像

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Some text to describe the card.</p>
  </div>
</div>

<div class="card custom-card">
  <!-- Card content -->
</div>

.custom-card {
  height: 300px; /* 设置卡片的固定高度 */
  overflow: hidden; /* 隐藏超出卡片高度的内容 */
}

<img src="image.jpg" class="card-img-top custom-img" alt="Card Image">

.custom-img {
  height: 100%; /* 图像高度占满卡片容器 */
  object-fit: cover; /* 缩放图像以填充整个容器 */
}