如何让Bootstrap 5.2等高卡片图片高度随父容器宽度按比例调整？

你的核心问题是固定高度的图片在容器宽度变化时无法保持原有比例，导致裁剪异常。下面提供两种可行方案：

方案一：使用Bootstrap 5内置的宽高比类（推荐） #

Bootstrap 5已经内置了aspect-ratio系列类，直接用来包裹图片就能轻松实现固定比例：

修改后的代码 #

CSS

.card-img-top {
  object-fit: cover; /* 保持图片比例并填充容器 */
}

HTML

把图片放在aspect-ratio-自定义比例的容器中，比如你原图片是300x500，比例是5:3（500/300≈1.666），对应Bootstrap的aspect-ratio-5x3：

<div style="overflow-x: hidden;">
  <div class="row">
    <div class="col-12 col-md-4 col-xl-3 mb-2">
      <div class="card h-100 shadow rounded" style="border: none;">
        <!-- 新增宽高比容器 -->
        <div class="aspect-ratio-5x3">
          <img src="https://place-hold.it/300x500/966" class="card-img-top w-100 h-100" alt="Some Image">
        </div>
        <div class="card-body d-flex flex-column align-items-start justify-content-between" style="background-color: whitesmoke;">
          <div>
            <div>
              <p>Line 1<br />Line 2</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 其他卡片重复上述结构即可 -->
  </div>
</div>

如果需要完全匹配300x500的比例，可添加自定义CSS：

.aspect-ratio-300x500 {
  aspect-ratio: 300/500; /* 直接设置宽高比 */
}

然后容器替换为class="aspect-ratio-300x500"即可。

方案二：自定义CSS容器（兼容Bootstrap 4及更早版本） #

如果使用的是Bootstrap 4或更早版本，利用padding百分比基于父容器宽度计算的特性，实现固定比例容器：

修改后的代码 #

CSS

/* 自定义比例容器 */
.img-container {
  position: relative;
  width: 100%;
  /* 300x500的比例：高度/宽度*100% = 500/300*100% ≈ 166.67% */
  padding-top: 166.67%;
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML

把图片放在自定义的img-container中：

<div style="overflow-x: hidden;">
  <div class="row">
    <div class="col-12 col-md-4 col-xl-3 mb-2">
      <div class="card h-100 shadow rounded" style="border: none;">
        <div class="img-container">
          <img src="https://place-hold.it/300x500/966" alt="Some Image">
        </div>
        <div class="card-body d-flex flex-column align-items-start justify-content-between" style="background-color: whitesmoke;">
          <div>
            <div>
              <p>Line 1<br />Line 2</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 其他卡片重复上述结构即可 -->
  </div>
</div>

两种方案都能保证图片在容器宽度变化时始终保持固定高宽比，同时object-fit: cover会让图片填充容器并裁剪超出部分，避免拉伸变形。

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