Stretch and fill image in Bootstrap carousel

Question

Hi guys i am using bootstrap carousal and having some problem with image height and width. Even though i define it in the img attribute it still displays as original resolution,following is the code i am using

<div class="col-md-6 col-sm-6">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>
</div>

Here is demo of that.

What should i do to fill the image in a certain height and width regardless of its original resolution.

Answer 1

Make your image take up 100% of the container size. using height:100% and width:100%.

Then restrict the size by setting values of the container to desired size.

.item{
  height:300px;
  width:350px;
}
.item img{
  width:100%;
  height:100%;
}

I hope this helps.

Answer 2

You can do that with the following styles:

.carousel-inner .item{
  width: 600px; /* Any width you want */
  height: 500px; /* Any width you want */
}
.carousel-inner .item img{
  min-width: 100%;
  min-height: 100%;
}

By setting min-* to the image attributes, we're making sure we have at least 100% of both width and height.

Updated JSFiddle

Answer 3

That you have width in placeholder should not matter, put this in your css and it should work, If it works you can try remove !important.

 .carousel img {
        width:100% !important;
        min-width:100 !important;
        height: auto;
    }

.img-responsive in bootstrap will just set the width to 100%, So in the case that the image original proportions are less than carousel width it will not fill it out.

Answer 4

You can place height in css and add !important because bootstrap is overriding your height with auto , and object-fit:cover; will work like background size cover a fiddle

.carousel{
  width:300px;
}
.item img{
  object-fit:cover;
  height:300px !important;
  width:350px;
}

Answer 5

I faced the same problem. What worked for me is instead of using img, I used div and background-image for css

HTML:

<div class="carousel-inner">
  <div class="item active">
    <div class="carousel-img"></div>
  </div>
</div>

CSS:

.carousel-inner, .item {
    height: 100%;
}

.carousel-img {
    background-image: url('http://placehold.it/400x400');
    width: 100%;
    height:100%;
    background-position:center;
    background-size:cover;
}

Answer 6

The carousel will grow to fit whatever the parent is by default, which in your case is .col-md-6 and .col-sm-6. If you want the carousel to be 300x300, style the carousel class/id or whatever to be the dimensions you want.

Then after that, bootstrap applies height: auto; to images in the carousel, which will override the height attribute you've specified in the HTML. 2 ways you can address that - either make the height (and for consistency sake, width, too) an inline style on the img tag if you want to keep it in the HTML, or apply the height to carousel images in your CSS file.

body {
    margin: 10px;
}
.carousel, .carousel img {
  width: 300px;
}
.carousel img {
  height: 300px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-md-6 col-sm-6">
  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://placehold.it/400x400">
      </div>
      <div class="item">
        <img src="http://placehold.it/350x450">
      </div>
      <div class="item">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </div>
</div>