Bootstrap 5 轮播高度相同，大小不同

问：

我正在使用 Bootstrap 5 轮播来显示从用户上传的图像列表，因此它们的高度和宽度不同。 我想要一个具有响应高度和缩放/填充图像的轮播。 这是我的HTML + CSS代码（图片取自网络，作为示例）：

<style>
#carouselExampleCaptions .carousel-item img {  
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  height:50vh;
}
</style>
<div class="card">
    <div class="card-body">
        <div class="row g-0">
            <div class="col-md-6">
                <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                  <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                  </div>
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img src="https://englishlive.ef.com/blog/wp-content/uploads/sites/2/2014/07/tall-1024x1535.jpg" class="d-block w-100" alt="...">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Some representative placeholder content for the first slide.</p>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img src="https://miro.medium.com/max/1400/1*NlA2fRVMV2blpuA0aPEgPA.png" class="d-block w-100" alt="...">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>Second slide label</h5>
                        <p>Some representative placeholder content for the second slide.</p>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img src="http://clipart-library.com/img/1832282.png" class="d-block w-100" alt="...">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>Third slide label</h5>
                        <p>Some representative placeholder content for the third slide.</p>
                      </div>
                    </div>
                  </div>
                  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                  </button>
                </div>
            </div>              
            <div class="col-md-6 p-2">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item"><b>ID:</b> 1</li>
                    <li class="list-group-item"><b>Uplodaded by:</b> User</li>
                    <li class="list-group-item"><b>Views:</b> 100</li>
                </ul>
            </div>
        </div>                      
    </div>
</div>

它的工作效果不是很好，因为当我简单地打开浏览器控制台时，图像会被压碎，并且图像上的字幕不会发生变化。如果我切换设备模拟器（在控制台上），也会发生同样的事情。

编辑：在@Aryclenio巴罗斯建议之后，我得到了结果：

宽度较大的图像

具有 Larghe 高度的图像