引导更改轮播高度

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <!-- 更多carousel-item -->
  </div>
</div>

.carousel {
  height: 300px; /* 设置轮播容器的高度 */
  overflow: hidden;
}

.carousel-item {
  height: 100%; /* 确保每个轮播项的高度与容器一致 */
}

.carousel-item img {
  height: 100%; /* 确保图片高度与轮播项一致 */
  object-fit: cover; /* 图片保持比例并覆盖整个容器 */
}

document.addEventListener('DOMContentLoaded', function() {
  const carousel = document.querySelector('.carousel');
  const items = document.querySelectorAll('.carousel-item');

  // 计算所有轮播项的最大高度
  let maxHeight = 0;
  items.forEach(item => {
    if (item.offsetHeight > maxHeight) {
      maxHeight = item.offsetHeight;
    }
  });

  // 设置轮播容器的高度
  carousel.style.height = `${maxHeight}px`;
});