时间戳

首页 > 解决方案 > 如何在不改变 CSS (Bootstrap 4) 中的比例的情况下将图像缩放到列宽？

html - 如何在不改变 CSS (Bootstrap 4) 中的比例的情况下将图像缩放到列宽？

问题描述

我有 200px 高度的缩略图。我想在不改变图像比例的情况下将我的缩略图图像缩放到一列的全宽（Bootstrap 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%;
}

在此处输入图像描述

标签： htmlcsstwitter-bootstrap

解决方案

只需像这样添加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/

推荐阅读