水平列尺寸不同时如何让Bootstrap网格卡片等高

解决方案 #

你遇到的高度异常是因为16:9比例的图片在列宽放大后，min-height:100%的规则会让图片高度随宽度等比放大，最终撑高卡片容器。你只需要修改第二张卡片的图片列和图片样式，将图片高度限制为和右侧文本列等高即可，修改步骤如下：

• 给第二张卡片的图片列col-md-5添加Bootstrap自带的position-relative overflow-hidden类，限制图片溢出边界
• 移除这张图片样式中的min-height: 100%，新增绝对定位规则，让图片自适应父容器高度

修改后的第二张卡片核心代码如下：

<div class="col mb-4">
  <div class="card h-100">
    <div class="row no-gutters">
      <!-- 新增position-relative overflow-hidden类 -->
      <div class="col-md-5 position-relative overflow-hidden">
        <picture>
          <!-- 修改图片样式，移除min-height，新增绝对定位规则 -->
          <img class="img-fluid w-100" style="object-fit: cover; object-position: center; position:absolute;top:0;left:0;height:100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
        </picture>
      </div>
      <div class="col-md-7">
        <div class="card-body py-1">
          <div class="row">
            <div class="col-12">
              <h5 class="card-title d-inline">Park</h5>
              <span class="float-right center-star">
                  3.4
                </span>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <span>Access</span>
              <span class="float-right">None</span>
            </div>
            <div class="col-12">
              <span>Max Size</span>
              <span class="float-right">10</span>
            </div>
            <div class="col-12">
              <span>Hosted</span>
              <span class="float-right">2</span>
            </div>
            <div class="col-12">
              <span>Type</span>
              <span class="float-right">None</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

修改后flex布局会自动让图片列高度和右侧文本列高度保持一致，图片会按object-fit: cover规则填充整个列容器，既加宽了图片展示区域，也不会撑高卡片，保证两张卡片等高。

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