Bootstrap carousel setting auto height not working

Question

I don't find a way to have an Auto height on the image in Bootstrap carousel. The only way I found to have an auto height on image is this, but as shown on the image the margin:auto create hudge top&bottom margin. How could I remove it ? If I remove the margin:auto , the height:auto won't work anymore.

HTML

<div id="carousel-{{$kit->kitNo}}" class="carousel slide" data-ride="carousel">                  
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="img-fluid" src="http://www.lebureauculturel.ch/wp-content/uploads/2017/09/goprohero5black.png" alt="First slide">
    </div>
  </div>
</div>

CSS

.carousel-inner {
 height:auto;
}
.carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img {
  width: 100%;
  margin: auto;
  min-height:initial;
}

With a bigger img the popup get out of screen for example.

Answer 1

I've have had the same issue and never did find a suitable answer.

I had captions on image and if responsive they would go to small to read.

The way I overcame the issue, which does not answer your question, I choose suitable images that on the left when cropped looked good. The text then remained same size making it easy to read on a mobile.

So the image remained the same height no matter what screen size was but obviously cropped to the screen size.

Keith

Answer 2

Set carousel-item height to auto or Simply add h-auto class along with carousel-item. It worked for me.