Bootstrap carousel images not same height in mobile view - html

Question

i have an bootstrap carousel on my page. The images I use have all different heights. I want that all images have the same height. For that I used
.carousel{ max-height: 1000px; overflow: hidden; }
I know it's not perfect but it works on desktop view. But in mobile view it didn't work and the pictures have not the same height.
So how can I make it that the images have all the same height in mobile view?
I hope someone can help me :)
Thanks.
That's my carousel-code:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="./img/index/seo.png" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="./img/index/security.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="./img/index/sport.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="./img/index/service.png" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

Answer 1

I would suggest you to use height not max-height
Owl carousel is responsive so it adds width:100% to each image whatever the screen-width is. and probably your images won't get the 1000px height. so it would be better if you add this code.
#media only screen and (max-width: 576px) {
.carousel .carousel-inner .item{
height: 100px // feel free to add the height you want to use but it's going to change the ratio of your image
}
}
If images are not the same height I prefer if you add them to the div of class item as a background-image css property