I recently set up a carousel using Bootstrap 4, but I'm encountering a couple of issues that I need help with:
The images in the carousel seem to be zoomed in when displayed. I'd like them to appear in their original sizes.
How can I adjust the size of the entire carousel?
Below is the code snippet I've been working with:
html
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/holz_40.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam placeat esse dicta eos ex nobis, error, corrupti optio aspernatur debitis iure ut sapiente minima exercitationem inventore maiores explicabo natus vitae..</p>
</div>
</div>
css:
.carousel {
margin-bottom: 4rem;
position: relative;
}
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
.carousel-item {
height: 32rem;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
height: 32rem;
object-fit: cover;
}
If anyone could provide guidance on how to display the images in their original size and resize the carousel accordingly, it would be greatly appreciated!