固定在屏幕尺寸上的自舉容器流體

Question

我想構建一個將加載11個圖像的頁面。

圖像需要在第一行中爲3，第二行中爲5，第三行中爲3。

這個圖像很大，但所有的都應該在屏幕上看到，所以我嘗試與容器流體類的div，所以所有的圖像填滿每個div col。

問題是，即使設置高度和/或最大高度，或者爲每行設置33％，heigth總是比屏幕大。

的代碼是：

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-lg-4"> 
     <a href="\"> <img src="image.png" class="img-responsive"> </a> 
    </div> 
    <div class="col-lg-4"> 
     <a href="\"> <img src="image.png" class="img-responsive"></a> 
    </div> 
    <div class="col-lg-4"> 
     <a href="\"> <img src="image.png" class="img-responsive"> </a> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-lg-4"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-6"> 
        <a href="\"> <img src="image.png" class="img-responsive"> </a> 
       </div> 
       <div class="col-lg-6"> 
        <a href="\"> <img src="image.png" class="img-responsive"> </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-4"> 
     <a href="\"> <img src="image.png" class="img-responsive"> </a> 
    </div> 
    <div class="col-lg-4"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-6"> 
        <a href="\"> <img src="image.png" class="img-responsive"> </a> 
       </div> 
       <div class="col-lg-6"> 
        <a href="\"> <img src="image.png" class="img-responsive"> </a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-lg-4"> 
     <a href="\"> <img src="image.png" class="img-responsive"> </a> 
    </div> 
    <div class="col-lg-4"> 
     <a href="\"> <img src="image.png" class="img-responsive"> </a> 
    </div> 
    <div class="col-lg-4"> 
     <a href="\"> <img src="image.png" class="img-responsive"> </a> 
    </div> 
</div> 

我能做些什麼，所有的圖像被自動調整大小以適應屏幕，並在同一時間被看見？

Answer 1

我發現如何。

基本上你只需要確保所有對每個器件尺寸一行和設置類，是這樣的：

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">    
       <a href="\"> <img src="image.png" class="img-responsive"> </a> 
     </div> 
    </div> 
    and so on...