Html 在CSS中，如何在不改变比率的情况下缩放图像到列宽（bootstrap4）？

我有200像素高的缩略图。我想在不改变图像比例的情况下，将我的缩略图图像缩放到一列的全宽（bootstrap4）。图像中不适合列高度的部分应该隐藏起来。我该怎么做

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>

---

只需将溢出：隐藏添加到父div中，将高度：自动添加到图像中，如下所示：

.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与虚拟图像：

我猜宽度：auto；但是演示会很有帮助：）太棒了！非常感谢你。我把

overflow:hidden

放在

b_u缩略图

类中哈哈哈，很高兴我能帮助这个人。如果这有助于您解决问题，请将其标记为正确答案。干杯，伙计！我庆祝得太早了。中间的缩略图没有缩放到200像素的高度。知道为什么吗？你能在高度不可缩放的地方贴一张带箭头的截图吗。从当前屏幕截图上看不出你的意思。哦，你说的是日历栏？你希望它的高度也等于200px还是？

.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%;
}