image size zoomed in in carousel - html

Question

I have implemented a carousel with Bootstrap 4. I have two main problems:
the images are somehow zoomed in. I don't want that. It should show the full size of the images.
how can I change the size of the carousel?
Here is my code:
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;
}
Can someone help me on how to show the images in the original size and change the size of the carousel?
I would appreciate your help!

Answer 1

I think it could be due to the property object-fit:cover of your .carousel-item > img rule.
As per MDN documentation:
Cover: The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
Cover property has many advantages when you are developing for a responsive portal, like you only have use an image that works for the most commons aspect ratios.
You could change the property to contain, so image can be displayed in normal aspect ratio, but then you need to take care at the dimensions of the enclosing carousel div.
.carousel {
margin-bottom: 4rem;
position: relative;
}
.carousel-inner {
background: red;
}
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
.carousel-item {
height: 32rem;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
height: 32rem;
object-fit: contain;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<dic class="carousel">
<div class="carousel-inner" >
<div class="carousel-item active">
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.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>
</div>