Как сделать изображение карусели начальной загрузки в центре вершины с окном просмотра

У меня есть страница http://jatinraikwar.com/w/slider.html

В этом хочу сделать вертикальный центр изображения. Использование карусели начальной загрузки.

Проблема в том, что хочет показать изображение как оно есть, но по центру.

Код:

<style>
.image-style {
    max-width: 100vw;
    max-height: 100vh;
    margin: auto;
}
</style>

<body style="background-color: black;">

    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/i0.jpg" class="d-block image-style" alt="...">
            </div>
            <div class="carousel-item">
                <img src="images/i1.jpg" class="d-block image-style" alt="...">
            </div>
    <div class="carousel-item">
      <img src="images/i5.jpg" class="d-block image-style" alt="...">
    </div>
            <div class="carousel-item">
                <img src="images/i3.jpg" class="d-block image-style" alt="...">
            </div>
            <div class="carousel-item">
                <img src="images/i0.jpg" class="d-blockimage-style" alt="...">
            </div>
    <div class="carousel-item">
      <img src="images/i5.jpg" class="d-block" style="max-width: 100vw; max-height: 100vh; margin: auto;" alt="...">
    </div>
        </div>
    </div>
</body>

javascript html css bootstrap-4 viewport-units
person Jatin Raikwar    schedule 23.09.2019    source источник
comment
Вы можете использовать flexbox для этого. Но если вы можете добавить фрагмент кода для вашей текущей реализации, это будет хорошо.   -  person Sandip Nirmal    schedule 23.09.2019
comment
покажи тоже свой код   -  person לבני מלכה    schedule 23.09.2019
comment
Можете попробовать добавить display: flex; justify-content: center; align-items: center; height: 100vh; в carousal-inner класс.   -  person Sandip Nirmal    schedule 23.09.2019
comment
@SandipNirmal Это не работает, вот ссылка jatinraikwar.com/w/slider.html   -  person Jatin Raikwar    schedule 23.09.2019
comment
@לבנימלכה Ссылка на код упоминается в вопросе, а код добавляется к вопросу. не могли бы вы проверить   -  person Jatin Raikwar    schedule 23.09.2019
comment
Я попросил код, потому что это своего рода правило на этом сайте (код, а не ссылка (вы можете добавить ссылку, но сначала код, потому что ссылку когда-нибудь можно будет удалить))   -  person לבני מלכה    schedule 23.09.2019

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете использовать flexbox и добавить 100vh к своим .carousel и .carousel-inner. Это делает изображения центрированными по вертикали. Попробуйте добавить приведенный ниже фрагмент на свою страницу.

.carousel,
.carousel-inner {
  height: 100vh;
  display: flex;
  align-items: center;
}
person Nidhin Joseph    schedule 23.09.2019

arrow_upward
0
arrow_downward

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

Выравнивание изображения по вертикали внутри карусели начальной загрузки

person Dixit Savaliya    schedule 23.09.2019