如何将bootstrap carousel匹配到div高度？

<div id="myCarousel" class="carousel slide" style="height: 400px;">
  <!-- Carousel内容 -->
</div>

<div id="myCarousel" class="carousel slide" style="height: 400px;">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <<div class="carousel-item">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <!-- 其他Carousel项 -->
  </div>
</div>

#myCarousel .carousel-inner {
  height: 100%;
}

#myCarousel .carousel-item {
  height: 100%;
}

#myCarousel .carousel-item img {
  height: 100%;
  object-fit: cover;
}

$(document).ready(function(){
  $('#myCarousel').carousel({
    interval: 5000, // 自动播放间隔时间（毫秒）
    pause: 'hover', // 鼠标悬停时暂停自动播放
    wrap: true // 循环播放
  });
});