如何使用视口在垂直中心制作 bootstrap 旋转木马图像

Question

我有一个页面http://jatinraikwar.com/w/slider.html

在此想做一个图片垂直居中。使用 bootstrap 轮播。

问题是，想要按原样显示图像，但在中心。

代码：

<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>

Answer 1

请参考这个link，我认为这对你的解释很有用。

Answer 2

您可以使用 flexbox 并将 100vh 添加到您的 .carousel 和 .carousel-inner。这是使图像垂直居中。尝试将以下代码段添加到您的页面。

.carousel,
.carousel-inner {
  height: 100vh;
  display: flex;
  align-items: center;
}

如何使用视口在垂直中心制作 bootstrap 旋转木马图像

How to make bootstrap carousel image in the verticle center with viewport

html

javascript

css

viewport-units

bootstrap-4