The Same Size Of Images In Carousel Slide

- 1 answer

I have a slider:

The problem is that when changing images, the height of the slider changes, despite the fact that it is hard-coded in the tag.

   <div id="myCarousel" class="carousel slide" data-interval="5000" data-ride="carousel">
                <!-- main slider carousel items -->
                <div class="carousel-inner">
                    <div class="active item" data-slide-number="0">
                      <!--  <a target="_blank" rel="nofollow noreferrer" href="{{route('createGirlPage')}}"> -->
                            <img  src="<?php echo asset("public/images/anketa.jpeg")?>" class="img-responsive"  height="200" width="200"  >
                    <!--    </a> -->

                    @foreach($vip as $girl)
                        <div class="item" data-slide-number="0">
                                                           <img  src="<?php echo asset("public/images/upload/$girl->main_image")?>" class="img-responsive"  height="200" width="200">

                <!-- main slider carousel nav controls -->
                <a class="carousel-control left" target="_blank" rel="nofollow noreferrer" href="#myCarousel" data-slide="prev">
                    <span class="icon-prev"></span>

                <a class="carousel-control right" target="_blank" rel="nofollow noreferrer" href="#myCarousel" data-slide="next">
                    <span class="icon-next"></span>


Add some css for set equal height in class .item here, I am using height:200px

.item{ height:200px;}

And also add css for cover image complete box like here i am add css in .item img

.item img {
width: 100%;
height: 100% !important;
object-fit: cover;}