使用引導網格顯示具有相同高度的橫向和縱向圖片

我正嘗試使用引導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>

來源

2017-08-31 Adrian

什麼是你的html？ – mlegg

最好的辦法是使用'背景圖像'和'background-size：cover'來實現它的CSS – Adam

你有沒有聽說過Flexbox的？

此鏈接可以幫助你，我希望：https://kartikprabhu.com/articles/equal-height-images-flexbox

來源

2017-08-31 15:24:15

Hy Bruno和坦克的鏈接，問題是如果我使用floxbox引導網格列不工作了 – Adrian

請在您的答案中包含鏈接中的相關信息。隨着時間的推移鏈接可能會過時，因此不鼓勵鏈接回答。請參閱[如何編寫好答案]（https://stackoverflow.com/help/how-to-answer）中的「爲鏈接提供上下文」一節。即使這個答案不適用於OP，也可能對其他人有幫助。 – FluffyKitten

使用引導網格顯示具有相同高度的橫向和縱向圖片

回答

相關問題