使用object-fit:cover时如何实现Bootstrap5响应式图片高度自适应

解决方案 #

方案1：纯CSS最简实现（无需修改HTML，推荐） #

直接用CSS原生aspect-ratio属性替换固定高度，即可实现任意宽高比下的响应式缩放，无需编写媒体查询：

/* 统一图片样式 */
article .card-img-top {
  object-fit: cover;
  overflow: hidden;
  /* 替换原来的height:20em，按你需要的比例调整，比如2:1就是2/1，16:9就是16/9 */
  aspect-ratio: 2 / 1;
}

这个属性已经被所有现代浏览器支持，比例固定后，图片高度会自动跟随父容器宽度同步变化，自动保持你设定的信箱式比例，裁剪效果也和之前一致。

方案2：复用Bootstrap原生工具类（无需编写自定义CSS） #

Bootstrap 5自带ratio响应式比例工具类，不需要写任何自定义CSS，仅修改HTML结构即可实现：

1. 给图片外层包裹一层div，添加ratio类和对应比例类（可选比例：ratio-1x1、ratio-4x3、ratio-16x9、ratio-21x9，也可以自定义比例）
2. 给图片添加w-100 h-100类，替换原来的img-fluid

修改后的HTML代码如下：

<div class="card">
    <div class="ratio ratio-21x9">
      <img src="/wp-content/uploads/2021/09/alexander-dummer-UH-xs-FizTk-unsplash-1.jpg" class="card-img-top w-100 h-100" alt="..." style="object-fit: cover;">
    </div>
    <div class="card-body px-4 px-md-5 py-md-4">
        <!-- 页面主体内容 -->
    </div>
</div>

如果需要不同断点使用不同比例，使用Bootstrap 5.3+的响应式ratio类即可，比如ratio-1x1 ratio-md-4x3 ratio-lg-21x9，自动在对应断点切换比例，完全不需要手动写媒体查询。

特殊场景方案（仅当需要不同断点高度逻辑和比例无关时使用） #

如果确实需要根据断点调整固定高度，再编写对应Bootstrap断点的媒体查询即可：

article .card-img-top {
  object-fit: cover;
  overflow: hidden;
  height: 12em; /* xs、sm断点默认高度 */
}
@media (min-width: 768px) { /* md断点 */
  article .card-img-top {
    height: 16em;
  }
}
@media (min-width: 992px) { /* lg断点 */
  article .card-img-top {
    height: 20em;
  }
}

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