具有匹配圖像高度的 Bootstrap 響應式畫廊

Question

我正在嘗試並嘗試構建一些我認為簡單但正確的東西，我知道我不知道該怎么做；) 老實說，幾個月前我很生氣，但我丟失了文件，我現在不知道如何構建它

所以，我使用 Bootstrap 來構建畫廊我有 2 種不同大小的圖像，長的和短的長的是 1920x1200，短的是 1200x1200px

我試圖在網格中構建它

<div class="row">
      <div class="col-md-6">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
      <div class="col-md-6">
        <img src="yourImg" />
      </div>
      <div class="col-md-6">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
      <div class="col-md-3">
        <img src="yourImg" />
      </div>
</div>

當然它應該看起來像我的預覽 img

當然 img 應該在每列的中心。

我嘗試使用 JS 進行匹配高度，它工作正常，但當然圖像不在父 div 中，我無法修復它。 我不能使用背景圖像，因為 JS 沒有讀取 div 的大小。

有任何想法嗎 ？ 如何構建它？ 最好的事情是我建造了它......現在我可以再次建造它！

非常非常感謝你 ！

Answer 1

如果您希望圖像匹配包含 div 的大小，您應該將此代碼添加到 CSS：

img {
  max-width: 100%;
  max-height: 100%;
}

您還可以使用以下方法保存原始比率：

img {
  max-width: 100%;
  height: auto;
}

Answer 2

首先，html的結構是錯誤的，每行有12列，你把每行的所有列都放在了一行。

代碼應該是這樣的：

 <div class="row">
    <div class="col-md-6">
       <img>
    </div>
    <div class="col-md-3">
       <img>
    </div>
    <div class="col-md-3">
       <img>
    </div>
 </div>

 <div class="row">
      <div class="col-md-6">
         <img>
      </div>
    <div class="col-md-6">
         <img>
    </div>
 </div>
 
 <div class="row">
   <div class="col-md-3">
       <img>
   </div>
   <div class="col-md-3">
       <img>
   </div>
    <div class="col-md-3">
        <img>
    </div>
    <div class="col-md-3">
        <img>
    </div>
</div>  

像這樣，圖像應該根據需要或多或少地組織