How to make the image scale to full height in Bootstrap - Carousel?

Question

I am trying to show an image that should fill up the entire screen in Bootstrap Carousel control. I am using an image with 1024px*795px

I am using the example given on Bootstrap site with full size image. Horizontally, it fills up the screen very well. But vertically it does not scale well. What properties should I add / delete so that the images fill up the entire screen, though they have smaller pixel sizes?

How can I do it in responsive designs as well, so that the images scale any size?

I am using the css as it is on the example site and only changing CSS in carousel.html.

Answer 1

2019 Updated Answer for Bootstrap 4.x

Since modern browsers now support object-fit, there are better options as explained here.

Original Answer for Bootstrap 3.x

I realize this answer is a little late, but I also faced a similar challenge with the Bootstrap carousel. In order for the 100% height to work, the carousel and any of its' parent containers must also be 100% height.

I added some overrides to the Bootstrap CSS classes:

html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
.fill{width:100%;height:100%;background-position:center;background-size:cover;}

And then add the "fill" class accordingly to your carousel:

<div class="container fill">
<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="active item">
      <div class="fill" style="background-image:url('//www.portalapp.com/images/greengrass.jpg');">
        <div class="container">
          <h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 1</a></strong></h1>

        </div>
      </div>
    </div>
    <div class="item">
      <div class="fill" style="background-image:url('//placehold.it/1024x700');">
        <div class="container">
          <h1 class="pull-left pull-middle light-color"><strong><a href="#">Slide 2</a></strong></h1>

        </div>
      </div>
    </div>
  </div>
  <div class="pull-center">
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
  </div>
</div>
</div>

Here is a working example: http://bootply.com/59900