Bootstrap 4等高行

-1

我做了一個使用bootstrap4網格的圖庫，每個圖像都是一排，如果6個圖像中的一個高於其他圖像，整行圖像也會變得更高，而且我想設置一個固定大小排，所以無論圖像只是在調整它的大小，我使用的CSSBootstrap 4等高行

height: 100%; width 100%;

，使其填補行的大小，因爲如果我沒有圖像都將在它的真正高度和寬度統計，併成爲質量。

<body> 
    <div class="container"> 
     <div class="row no-gutters"> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="tall-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
     </div> 
    </div> 
</body>

來源

2017-03-21 Calibur Victorious

@ZimSystem，如果圖像是200x300等爲150x250，採用100％我得到填充兩個圖像爲300×300，如果我沒有使用100％，它保持它的正常大小，而每廢墟DIV可能的斷點視圖 –

好吧，我不明白你想要完成什麼。你期望它如何工作？你期望下一行在第一行下完美對齊嗎？像「磚石」效應？ – ZimSystem

@ZimSystem問題沒有對齊，例如，如果第一行有1張圖片500x400，另外5張是250x200，則會將500x400壓縮到250x200，即使這會破壞它。 –