使用自举网格显示相同高度的横向和纵向图片

Question

我正在尝试使用bootstrap 3网格系统创建图片网格。我的照片是肖像和风景。我想并排添加图片并具有相同的高度。我在这里发现了类似的东西，但这会改变风景画面。 这是我尝试的代码：

 .img-wrapper {
        position: relative;
        padding-bottom: 100%;
        overflow: hidden;
        width: 100%;
        height:100%;

    }

    .img-wrapper img {
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right: 0;
        width:100%;
        height:100%;
    }

这个问题正如我所说，它使景观变得更高。 我怎么能接受这个？我需要调整图片大小吗？ 以下是了解

的示例

这就是我想要实现的目标

这是HTMLcode：

<div class="container">
    <div class="row equal">
    <% collections.forEach(function (collection) {
        var columnClassList;

        if(collection.coverFormat === 'portrait') {
            columnClassList = 'col-lg-3 col-md-3 col-sm-3 col-sx-12';
        } else {
            columnClassList = 'col-lg-6 col-md-6 col-sm-6 col-sx-12';
        }
    %>
        <div class="<%= columnClassList %> banner">
            <a href="/collection/<%= collection._id %>">
                    <img src=" <%= collection.path + collection.displayImage %> " alt="<%=collection.displayImage %>"
                        class="img-responsive img-thumbnail"></a>
            <p class="text-center collectionName"> <%= collection.collectionName %> </p>
            <p class="text-center collectionDate"> <%= collection.date %> </p>
         </div>
    <% }); %>
    </div>
</div>

Answer 1

您是否已经听说过flexbox？

此链接可以帮助您，我希望：https://kartikprabhu.com/articles/equal-height-images-flexbox