Question posted in 
I am using a BOOTSTRAP 5 carousel. I have images some are portrait and some are landscape. they have differing heights and widths.
I have fixed the height of the carousel So that the controls don’t jump around as the image sizes change.
What I want to do is, if the image is portrait fit it in the max height of the carousel and then center the image. if the image is landscape fit it in the max width of the carousel and center it horizontally.
I do not want the image distorted or stretched.
What is happening at the moment is that the portrait images that are taller than the carousel height are only showing the top part of the image
.carousel {
height: 250px; /* Set the height you want */
overflow: hidden;
background-color: #6c757d;
}
.carousel-item {
height: 100%;
//justify-content: center;
//align-items: center;
}
.carousel-image {
object-fit: cover;
height: 100%; /* Ensure the image takes the full height */
width: 100%;
}
2
Answers
Just Adjust The Height And Width Of The Images As The Same Height And Width Of The Carousel :
make a
widthandheightfor The Carousel Eelment :Then Put This Code In A New CSS File :
Then This Is The Run :
To Set Something To The Entire Height Of The Page There Are Two Ways :
1.(Easy Way) Simply Set The Carousel And Image Height To
100vhSo It Fits The Entire Page And The Same Thing In Width By100vw.2.(Hard Way) Set The
<html>height to %100, Then Do The Same Thing In TheBodyElement And It Will Work.