抱歉，这是该主题的第 1754 个问题。我看了很多，但仍然无法正常工作。从各种答案中，我想出了以下测试用例。
它保持宽高比，但使图片全宽，即使是纵向的。然而，肖像应该有可用的 100vh 高度，然后左右有一些空间。
我经常看到，如果没有背景图像，这是很难做到的。不幸的是我不知道如何使用背景图像来做到这一点。如果这更容易，我会拉伸一个像素。
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;}<body>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<div class="container-fluid">
<div id="albumCarousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item full-size-carousel active">
<img src="https://www.americanexpress.com/de-de/amexcited/media/webp/de-de/amexcited/media/cache/article_intro_hero/cms/2023/01/grand-canyon-titelbild.webp?352612" class="d-block w-100" >
</div>
<div class="carousel-item full-size-carousel">
<img src="https://www.dds-online.de/wp-content/uploads/4/9/498673.jpg" class="d-block w-100">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#albumCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#albumCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>此示例无法在 Bootstrap 5 沙箱中运行（相反，它的运行方式如上所述），我的真实代码也无法在我的机器上运行。
万一其他人对此感到绝望，我最终用 js/jQuery 做到了。
我只是根据图像的宽高比和可用的屏幕/窗口尺寸修改以下图像标签：
<img src="myImg.jpg" class="carouselImage d-block w-100" >// Get width/height on page load and add listener
setSize();
window.addEventListener("resize", onResizeInstant);
function onResizeInstant() {
setSize();
}
function setSize() {
const heightHeader = 20;
const carouselImages = $('.carouselImage');
var addClass;
var removeClass;
carouselImages.each(
function(){
const imgHeightInit = $(this).height();
const imgWidthInit = $(this).width();
const imgAspectRatio = imgWidthInit/imgHeightInit;
const windowHeight = window.innerHeight - heightHeader;
const windowWidth = window.innerWidth;
const windowAspectRatio = windowWidth/windowHeight;
if(windowAspectRatio > imgAspectRatio) {
addClass = 'h-100';
removeClass = 'w-100';
imgHeight = windowHeight;
imgWidth = imgAspectRatio * imgHeight;
} else {
addClass = 'w-100';
removeClass = 'h-100';
imgWidth = windowWidth;
imgHeight = imgWidth / imgAspectRatio;
}
$(this).addClass(addClass).removeClass(removeClass);
})
}