将 Wordpress 图像缩放到 Bootstrap 内的相同高度 flex-row flex-nowrap

Question

我已经 Bootstrap 与 Wordpress 下划线模板集成。

我想制作一个水平滚动的容器，其中包含具有相同高度的图像。

我一直坚持这一点，我有可滚动的容器，但图像高度不一样；

/*for example purposes*/
.example{
  background:pink;
}

/*underscores style.css*/
img {
    height: auto;
    max-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-fluid overflow-auto border border-dark">
        <div class="row flex-row flex-nowrap">
            <div class="col-3"><img class="example" width="755" height="523"><br><em>text1</em></div> 
            <div class="col-3"><img class="example" width="555" height="623"><br><em>text2</em></div> 
            <div class="col-3"><img class="example" width="455" height="123"><br><em>text3</em></div> 
            <div class="col-3"><img class="example" width="255" height="323"><br><em>text4</em></div> 
            <div class="col-3"><img class="example" width="555" height="823"><br><em>text5</em></div> 
        </div>
    </div

Answer 1

当你想匹配图片的尺寸，而你又不知道每个图片的具体尺寸时，最好使用css。

object-fit属性很棒。它帮助我们调整 or 的大小以适合其容器。它的工作原理就像 background-image.

它具有不同的属性，这些属性将根据您想要执行的操作提供帮助。定义容器的大小很重要，这样才能正确匹配。

Here more information about this property

有趣的是它有一个属性来对齐容器内元素的位置，这个叫做object-position

按照您的风格打勾。定义图片的高度，剩下的就搞定了

img {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

将 Wordpress 图像缩放到 Bootstrap 内的相同高度 flex-row flex-nowrap

Scaling Wordpress images to same height inside Bootstrap flex-row flex-nowrap

css

wordpress

image

image-scaling

bootstrap-5