Currently, I am working on a carousel design that looks like the code snippet below:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
...
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="Images/pastry3.jpg" alt="First slide">
</div>
</div>
...
</div>
In addition, I have defined some CSS styles as shown below:
.carousel {
width: 100%;
height: 100%;
}
.carousel .carousel-inner, .carousel .carousel-item {
width: 100%;
height: 100%;
}
.carousel-item img {
object-fit: cover;
object-position: 50% 50%;
}
My goal is to display images that are larger than the screen while maintaining their aspect ratios and centering them using object-fit: cover; and object-position: 50% 50%. However, this approach doesn't seem to be achieving the desired result. What could be the reason behind this issue?
On the whole, my aim is to create a full-screen practice homepage featuring sliding images and videos with varying text sections on different slides.