如何在Bootstrap中的全高列中放置图像？

Question

我想实现这样的目标：http://weprob.aw-theme.com/home_one/index.html

此示例使用<resource-bundle> <bundleName>com.example.MyBundle</bundleName> <var>msgs</var> </resource-bundle> ，但我不需要。我只是想把图像放在我所拥有的3个全高度列中，它们之间没有任何填充或空格。

在较小的屏幕上观看时，我希望图像保持其完整的高度尺寸。

这是我到目前为止所拥有的

owl-carousel

我的CSS非常简单

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

我添加了html, body { height: 100%; overflow: hidden; } ，因为我可以看到水平滚动条。

然而，这就是它的出现方式

这就是我调整浏览器大小时的样子

Answer 1

如果我理解正确，你想要这样的东西吗？请参阅下面的代码段或在此处小提琴＆gt;的 jsfiddle

首先我使列的高度相等，因为默认情况下它们具有内容的高度，如果使用不同大小的imgs，cols的高度将不相等。这是通过简单的JQ

完成的

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

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

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

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>