如何在不更改CSS中比率的情况下将图像缩放到列宽（引导4）？

Question

I have thumbnails with 200px height. I would like to scale my thumbnail image to the full width of a column (Bootstrap 4) without changing the ratio of the image. The part of the image that doesn't fit the column height should just be hidden. How can I do this?

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

Just add overflow:hidden to your parent div and height: auto to your image like this:

.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 with dummy image: https://jsfiddle.net/AndrewL64/oy5xaf5g/