固定在屏幕尺寸上的自举容器流体

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...