Halnex Halnex - 3 months ago 9
CSS Question

How can I fit images in full height columns in Bootstrap?

I would like to achieve something like this: http://weprob.aw-theme.com/home_one/index.html

This example is using

owl-carousel
but I don't need that. I just want to fit the images inside the 3 full height columns I have, without any padding or spaces between them.

And when viewed on a smaller screen, I would like the images to retain their full height dimensions.

This is what I have so far

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


My CSS is fairly simple

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


I added
overflow: hidden
because I can see the horizontal scrollbar.

However, this is how it's coming out

Full Screen

And this is how it looks when I resize the browser

Responsive

Answer

if i understood correctly , you want something like this ? see snippet below or fiddle here > jsfiddle

first i made the columns equal in height, because by default they have the height of the content inside them, and if you use imgs with different sizes, to cols will not be equal in height. this was done with a simple JQ

then , because img.responsive has some default css from bootstrap, i had to overwrite it.

also the columns have their default CSS that need to be changed.

as a conclusion, if you want something like this, i don't think you need to use bootstrap. but that's your choice. maybe i didn't understand exactly what you want.

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>

Comments