如何在Bootstrap 4中用CSS将图片缩放至列宽且保持比例？

我来帮你搞定这个问题！要实现缩略图适配Bootstrap 4列的完整宽度、保持比例且超出高度部分隐藏，你可以通过调整容器和图片的CSS属性来实现，具体步骤如下：

1. 调整HTML结构 #

给包裹图片的div添加一个容器类（比如b__thumbnail-container），方便我们控制裁剪区域：

<a class="b" href="#">
  <div class="mb-3 b__thumbnail-container">
    <img class="b__thumbnail" src="img/placeholders/b_thumbnail.jpg">
  </div>
  <div>
    <span class="b__category" style="color: blue;">Bla</span>
    <h3 class="b_title">Bla</h3>
    <p class="b__text">Bla</p>
    <span class="b__meta">Bla</span>
  </div>
</a>

注意：确保你的整个组件外层已经包裹了Bootstrap 4的列类（比如col-md-4、col-sm-6等），这样列的宽度才会生效哦！

2. 修改CSS样式 #

通过容器控制裁剪区域，再用object-fit属性保持图片比例：

.b__thumbnail-container {
  height: 200px; /* 固定你需要的高度 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  border-radius: 3px; /* 将圆角移到容器上，避免图片边缘裁剪问题 */
}

.b__thumbnail {
  width: 100%; /* 占满Bootstrap列的宽度 */
  height: 100%; /* 填满容器高度 */
  object-fit: cover; /* 按比例缩放图片，填满容器，多余部分裁剪 */
}

原理说明 #

• object-fit: cover是关键：它会让图片按原有比例缩放，确保填满容器的同时，不会拉伸变形，超出容器的部分会被自动裁剪。
• 容器设置overflow: hidden：把图片超出容器高度的部分隐藏起来，实现你要的裁剪效果。
• 图片设置width: 100%：自动适配Bootstrap列的宽度，不管列是在移动端还是桌面端，图片都会铺满列的宽度。

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