Apologies, this is now the 1754th question on this particular topic. Despite my extensive research, I still can't seem to get it to work as intended. After reviewing various answers, I created the following test case.
The challenge lies in maintaining the aspect ratio while ensuring the picture takes up the full width, even in portrait mode. Ideally, portraits should utilize the available 100vh height with some space on the sides.
Many have noted that achieving this without a background image is tricky. Unfortunately, I haven't found a solution using a background image either. If that would make things simpler, I am willing to explore that option.
CSS / HTML
.full-size-carousel.carousel { height: calc(100vh - 56px);}
.full-size-carousel.carousel-inner,.full-size-carousel.carousel-item { height: 100%;}
.full-size-carousel.carousel-item img { height: 100%; object-fit: cover; object-position: center;}Despite successful implementation in a Bootstrap 5 sandbox, this example did not function as expected. Additionally, my actual code failed to produce the desired outcome on my local machine.