Having an issue with Bootstrap 4 carousel where the images appear too big and zoomed in. Unsure of what's causing the problem.
Here is the HTML code:
<div class="carousel-inner">
<div class="carousel-item active col-xs-12 col-sm-12">
<img src="/images/holz_5.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. Provident, minima.</p>
</div>
</div>
<div class="carousel-item col-xs-12 col-sm-12">
<img src="/images/holz_6.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. Provident, minima</p>
</div>
</div>
<div class="carousel-item col-xs-12 col-sm-12">
<img src="/images/holz_4.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. Provident, minima</p>
</div>
</div>
</div>
CSS code:
.carousel {
margin-bottom: 4rem;
position: relative;
}
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
.carousel-inner img {
position: absolute;
top: 0;
left: 0;
height: 32rem;
object-fit: cover!important;
display: block;
}
.carousel-item {
height: 32rem;
}
Image appears too zoomed in.
Original image for reference: https://i.sstatic.net/DDgtc.jpg
Seeking help to resolve this issue.