Как сделать образ начальной загрузки карусели в центре вертикали с окном просмотра - PullRequest
Новая
       4

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

1 голос
/ 23 сентября 2019

У меня есть страница 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>

Ответы [ 2 ]

2 голосов
/ 23 сентября 2019

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

.carousel,
.carousel-inner {
  height: 100vh;
  display: flex;
  align-items: center;
}
0 голосов
/ 23 сентября 2019

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...