My webpage has a dynamic carousel feature where users can upload images, but I have no control over their dimensions. Despite some guidelines in place, it is uncertain if they will be followed.
In my development tests, I have used three sample images: one sized 100x100, another 2800x1500, and a third 600x400.
The goal is to center the responsive carousel on the page. Typically, this isn't an issue with consistent image sizes.
...
<div class="carousel-item active">
<div class="carousel-img">
<img src="img1.png">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img">
<img src="img2.png">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img">
<img src="img3.png">
</div>
</div>
...
The current CSS for "carousel-img" (after various failed attempts) is:
.carousel-img {
height: 400px;
width: 100%;
overflow: hidden;
}
.carousel-img img {
height: 100%;
width: 100%;
object-fit: cover;
}
The large image resizes appropriately within the fixed dimensions, while the smaller ones struggle to fill the container horizontally despite using 100% width.
To ensure all images resize without changing aspect ratio and utilize 100% of the parent container, modifications are needed. For instance, when the carousel is wrapped in a <div class="col-md-6">, it should expand up to 400px vertically.
Edit
I apologize for any confusion caused. The issue was not actually in my code snippet above. Instead, there was an additional DIV preceding the carousel:
<div class="row justify-content-center">
Although meant to center subsequent DIVs, inexplicably, the justify-content-center property interfered with the image resizing. Removing it resolved the problem, allowing the images in the carousel to display as intended.
Many thanks to those who offered assistance – today, I gained valuable insights.