Javascript 转盘幻灯片中的图像大小相同

我有一个滑块：

问题是，在更改图像时，滑块的高度会发生变化，尽管它在标记中是硬编码的

   <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 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" href="#myCarousel" data-slide="prev">
                    <span class="icon-prev"></span>
                </a>

                <a class="carousel-control right" href="#myCarousel" data-slide="next">
                    <span class="icon-next"></span>
                </a>
            </div>

在类
中为设置等高添加一些css。项目
在这里，我
使用高度：200px

.item{ height:200px;}

此外，还可以为封面图像完整框添加css，就像我在
中添加css一样。item img

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

你的图像有不同的高度。因此，您可以看到这种行为

将固定高度添加到.item div

.carousel-inner>.active {
  height: 150px; //this can be whatever you want
}

并从图像中删除height=“200”属性。
删除硬编码的宽度和高度，并将其放入样式表中

.carousel-inner>.item>img, .carousel-inner>.item>a>img{
height:150px;
}

谢谢你的这篇文章，它帮助了我很多！