Почему эти изображения карусели корректируют высоту после перехода?

Question

Я возился с фоновой каруселью, и единственная проблема, с которой я столкнулся, заключается в том, что, когда изображения скользят, высота регулируется глючным образом.Как я могу решить эту проблему?

Для справки, моя веб-страница здесь .

Вот моя карусель 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;
}

Answer 1

Чтобы решить проблему с текущей страницей, вы можете выполнить следующий код CSS

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

Answer 2

Просто уберите высоту: 100vh и поместите эту css

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

Надеюсь, это поможет!

Answer 3

Похоже, ваши селекторы неверны в том, как настроен ваш HTML.

Должно быть .carousel-item, а не .carousel,.item.

Answer 4

Это потому, что у вас есть это:

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

, и вы должны иметь это:

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

это делает высоту согласованной.100vh на элемент div, содержащий изображение, которое применяется, когда слайд уже находится в конечной позиции, поэтому размер изображения «прыгает».

Answer 5

Добавьте 100% высоты на carousel-inner и carousel-item.