Ad

The Same Size Of Images In Carousel Slide

- 1 answer

I have a slider:http://sakura-city.info/test

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> -->
                    </div>

                    @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">

                        </div>
                    @endforeach
                </div>
                <!-- 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>

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

Answer

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;}
Ad
source: stackoverflow.com
Ad