I am struggling to achieve an auto height on an image within a Bootstrap carousel. The only solution I have found involves using margin:auto, but this creates excessive top and bottom margins, as shown in the image. Is there a way to remove these margins without affecting the functionality of height:auto?
https://i.sstatic.net/GF5Ms.png
Here is the HTML code:
<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>
And here is the CSS code:
.carousel-inner {
height:auto;
}
.carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img {
width: 100%;
margin: auto;
min-height:initial;
}
However, when using a larger image, the popup extends off the screen. See example image below: https://i.sstatic.net/193Zv.png