Css 为什么这些旋转木马图像会在转换后调整高度？

我一直在摆弄一个背景旋转木马，唯一的问题是当图像滑入时，高度会以一种浮躁的方式进行调整。如何解决此问题

作为参考，我的网页是

这是我的旋转木马css：

.carousel-item,.active{
    height:100vh;
    width:100%;
    overflow:hidden;
    margin:0;
    padding:0;
    -webkit-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

---

在

旋转木马内部

和

旋转木马项目

上添加100%的高度。看起来您的HTML设置方式的选择器是错误的

---

应该是

.carousel item

而不是

.carousel.item

这是因为您有：

.img-slide {
    width: 100%;
    height: 100%;
}

.img-slide {
    width: 100%;
    height: 100vh;
}

你应该有这个：

.img-slide {
    width: 100%;
    height: 100%;
}

.img-slide {
    width: 100%;
    height: 100vh;
}

---

这使得高度一致<当幻灯片已经处于最终位置时，在包含图像的div上应用code>100vh，这就是图像大小“跳跃”的原因。

只需删除高度：100vh并放置此css即可

   .carousel-item.active {
        display: block;
        height: auto;
    }

---

希望这有帮助

要解决当前页面问题，可以执行以下css代码

.carousel-inner{
  height:100vh;
}
.carousel-item{
  height:100vh;
}