html - 如何在不改变 CSS (Bootstrap 4) 比率的情况下将图像缩放到列宽？

Question

我有 200 像素高度的缩略图。我想在不改变图像比例的情况下将我的缩略图缩放到一列的整个宽度 (Bootstrap 4)。图像中不适合列高的部分应该被隐藏。我该怎么做？

HTML

<a class="b" href="#">
    <div class="mb-3">
        <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>

CSS

.b__thumbnail {
  border-radius: 3px;
  height: 200px;
  width: 100%;
}

Answer 1

只需将 overflow:hidden 添加到您的父 div 并将 height: auto 添加到您的图像，如下所示:

.mb-3 {
    height: 200px; /* You can remove this if you have already specified the 200px height of thumbnails somewhere else */
    overflow:hidden;
}

.b__thumbnail {
  border-radius: 3px;
  height: auto;
  width: 100%;
}

---

带有虚拟图像的 jsFiddle: https://jsfiddle.net/AndrewL64/oy5xaf5g/