ブートストラップグリッドを使用して同じ高さの風景画像とポートレート画像を表示する

Question

ブートストラップ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あるachiveしたいものです。

<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

はすでにフレキシボックスについて聞いたことがありますか？

このリンクはあなたを助けることができるが、私は願っています：https://kartikprabhu.com/articles/equal-height-images-flexbox