Check out my webpage at
I'm trying to vertically center an image using the bootstrap carousel.
The issue I'm facing is that I want the image to be displayed in its original size, but centered on the page.
Here's the code snippet:
<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>