[英]How to scale image to column width without changing ratio in CSS (Bootstrap 4)?
我有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%;
}
只需将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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.