如何在Bootstrap中将全图像放在全高度栏中？

Question

我想达到这样的效果：http://weprob.aw-theme.com/home_one/index.html

这个例子是使用owl-carousel，但我不需要那样。我只是想适合我有3个全高度的列中的图像，没有任何填充或它们之间的空间。

而在较小的屏幕上查看时，我希望图像保留其全高尺寸。

这是我迄今为止

<div class="row"> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <img src="assets/images/slide1.jpg" class="img-responsive"> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <img src="assets/images/slide2.jpg" class="img-responsive"> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <img src="assets/images/slide4.jpg" class="img-responsive"> 
    </div> 
</div> 

我的CSS是相当简单的

html, body { 
    height: 100%; 
    overflow: hidden; 
} 

我加入overflow: hidden因为我能看到水平滚动条。

然而，这是它是如何走出

，这是它的外观，当我调整浏览器

Answer 1

如果我理解正确的，你想要的东西像这个 ？看到片断低于或摆弄这里>jsfiddle

首先我做的列相同的高度，因为默认情况下，他们必须在他们里面的内容的高度，如果你使用imgs不同尺寸，以cols不会高度相等。这是通过一个简单的JQ

然后，因为img.responsive有一些来自bootstrap的默认css，我不得不覆盖它。

这些列还有需要更改的默认CSS。

作为结论，如果你想要这样的东西，我不认为你需要使用引导程序。但这是你的选择。也许我不明白你想要什么。

var highest = 0; 
 
     $('.col-md-4').each(function(){ 
 
       if($(this).height() > highest){ 
 
       highest = $(this).height(); 
 
     } 
 
    });  
 
    $('.col-md-4').height(highest);

html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.img-responsive{ 
 
height:100%; 
 
width:auto; 
 
max-width:none 
 
} 
 
.col-md-4.col-sm-6.col-xs-12 { 
 
width:33.33%; 
 
float:left; 
 
overflow:hidden; 
 
padding:0 
 
}

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <img src="http://beerhold.it/200/200" class="img-responsive"> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <img src="http://beerhold.it/250/250" class="img-responsive"> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <img src="http://beerhold.it/500/500" class="img-responsive"> 
 
    </div> 
 
</div>