Stretch and fill image in Bootstrap carousel

Question

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 a

Answer 1

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 2

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