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%;
}
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.