Question

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

作为参考，我的网页是https://jqplay.org/s/w2N_Ozg9Ag。

这是我的轮播CSS：

        {
              "userType": "new",
              "userName": "net",
              "itemCatalog": [
                {
                  "itemId": 1,
                  "name": "harry potter",
                  "state": "sold"
                },
                {
                  "itemId": 2,
                  "name": "adidas shoes"
                },
                {
                  "itemId": 3,
                  "name": "watch"
                },
                {
                  "itemId": 4,
                  "name": "adidas shoes",
                  "state": "in inventory"
                }
              ]
            }

Answer 1

这是因为您拥有这个：

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

您应该有这个：

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

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

Answer 2

在carousel-inner和carousel-item上都增加100％的高度。

Answer 3

似乎您的选择器在设置HTML的方式上是错误的。

应该是.carousel-item而不是.carousel,.item。

Answer 4

只需移除高度：100vh，然后将此css

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

希望这会有所帮助！

Answer 5

要解决当前页面问题，您可以按照以下CSS代码进行操作

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

为什么这些轮播图片会在过渡后调整高度？

5 个答案: