Проблема с фиксацией высоты карусели

Question

Как контролировать высоту карусели?

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="Images/Carousel 01.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="Images/Carousel 02.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="Images/Carousel 03.jpg" alt="...">
                </div>
            </div>

Answer 1

Вы можете использовать такие стили, как min-height, max-height и т. Д.

Добавить следующее в вашу таблицу стилей.

#carousel-example-generic{
   min-height : 300px;
}

Если есть что-то, переопределяющее вашу конфигурацию, вы можете добавить !important сразу после 300px.

Эти сайты будут вам полезны:

https://www.w3schools.com/cssref/pr_dim_height.asp

https://www.w3schools.com/cssref/pr_dim_min-height.asp

https://www.w3schools.com/cssref/pr_dim_max-height.asp

Answer 2

Попробуйте это:

.carousel .item {
  height: 300px;
}

.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 300px;
}

Answer 3

Напишите новый CSS для .carousel и добавьте высоту в соответствии с вашими потребностями.