css - 使用引导网格显示相同高度的横向和纵向图片

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%;
    }

这个问题就像我说的那样，它使景观变形，使它变得更高。我该如何解决这个问题？我需要调整图片大小吗？这是它看起来如何知道的示例

这就是我想要实现的目标

这是 HTML 代码:

<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