如何在不更改CSS中比率的情況下將圖像縮放到列寬（引導4）？

Question

我有200像素高的縮略圖。 我想在不更改圖像比例的情況下將縮略圖圖像縮放到列的整個寬度（引導程序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/