如何让Bootstrap 5轮播图中的图片保持相同高度

方案一：CSS固定容器高度（适合固定尺寸场景） #

• 给轮播容器设置固定高度，同时让图片保持比例填充容器，避免拉伸变形
• 操作步骤：
  1. 为.carousel-inner添加固定高度
  2. 给图片设置object-fit属性控制缩放方式

.carousel-inner {
  height: 400px; /* 根据第一张图片实际高度调整数值 */
}

.carousel-item img {
  height: 100%;
  object-fit: cover; /* 保持比例，裁剪超出部分；若要完整显示图片用object-fit: contain */
}

方案二：JS动态匹配第一张图片高度（推荐响应式场景） #

• 页面加载后自动获取第一张激活图片的高度，同步设置给所有轮播项容器，确保高度一致，同时支持窗口尺寸变化时自动更新

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<style>
.carousel-item img {
  object-fit: cover; /* 避免图片拉伸变形 */
  width: 100%;
  height: 100%;
}
</style>

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="https://venemergencia.com/assets/Banner_principal_Mapa.8ec397bc.png?avif" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="https://venemergencia.com/assets/Banner_principal_AVILA.2e5ec20a.png?avif" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://venemergencia.com/assets/Telesalud-COVID-19.1370e3f7.png?avif" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://img.freepik.com/vector-gratis/grupo-personal-medico-que-lleva-iconos-relacionados-salud_53876-43071.jpg?w=2000" class="d-block w-100 img-fluid" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const carouselInner = document.querySelector('.carousel-inner');
  const firstActiveImg = document.querySelector('.carousel-item.active img');

  // 等待图片加载完成再获取准确高度
  function setCarouselHeight() {
    carouselInner.style.height = firstActiveImg.offsetHeight + 'px';
  }

  if (firstActiveImg.complete) {
    setCarouselHeight();
  } else {
    firstActiveImg.onload = setCarouselHeight;
  }

  // 窗口尺寸变化时重新计算高度
  window.addEventListener('resize', setCarouselHeight);
});
</script>

关键说明 #

• object-fit: cover是核心，它能让图片在容器内保持原有比例，自动裁剪超出部分，完全避免图片拉伸变形
• JS方案会自动适配第一张图片的实际高度，且在窗口缩放时同步更新，适合响应式网页场景

内容的提问来源于stack exchange，提问作者Arturo Gabriel