如何实现浏览器中Bootstrap轮播图无需上下滚动即可完整查看？

当前Bootstrap轮播图代码可正常运行，但图片显示过大导致浏览器出现上下滚动条，请问如何调整让图片适配页面无需滚动？是否需要根据每张图片的宽高单独调整？

原代码展示 #

CSS代码 #

.carousel-inner {
  height: 0;
  padding-bottom: 60%; /* 控制轮播宽高比 */
}

.carousel-item {
  position: absolute !important; /* 覆盖Bootstrap默认样式 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.carousel-item img {
  height: 100%; /* Bootstrap已处理宽度 */
  object-fit: contain; /* 图片适配方式 */
}

* {
  box-sizing: border-box;
/* 这里缺少闭合的} */

HTML代码 #

<div class="container"> 
  <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner ">
     <div class="carousel-item active">
      <img src="images/_1_early_history_and_stamp_1.jpg"  class="d-block w-100" alt="books_photo">
     </div>
    </div> 
  </div>
</div>

调整方案 #

1. 限制轮播容器的最大高度，避免超出视口 #

把.carousel-inner的样式改成基于视口高度的设置，确保轮播不会超出浏览器可视区域。如果页面有顶部导航栏，需要减去导航栏的高度（比如默认Bootstrap导航栏高度为56px）：

.carousel-inner {
  /* 用视口高度控制，减去导航栏高度避免遮挡 */
  height: calc(100vh - 56px);
  /* 移除原来的padding-bottom，改用flex布局让内容自适应 */
  display: flex;
  align-items: center;
}

如果没有导航栏，直接用height: 100vh即可。

2. 优化图片的适配规则 #

调整图片的样式，确保它在容器内自适应，不会撑大容器：

.carousel-item img {
  width: 100%;
  max-height: 100%;
  object-fit: contain; /* 完整显示图片，不裁切，可根据需求换成cover */
}

• contain：图片完整显示，容器可能留空白
• cover：图片填满容器，超出部分会被裁切

3. 修正代码错误 #

原CSS里的* {box-sizing: border-box;}没有闭合，补上}避免样式混乱：

* {
  box-sizing: border-box;
}

4. 无需单独调整每张图片 #

只要统一设置容器的最大高度和图片的适配规则，不管图片原宽高比如何，都会自动适配容器，不会导致页面出现滚动条。

修改后的完整代码 #

CSS #

* {
  box-sizing: border-box;
}

.carousel-inner {
  height: calc(100vh - 56px); /* 根据实际导航栏高度调整 */
  display: flex;
  align-items: center;
}

.carousel-item {
  width: 100%;
  height: 100%;
}

.carousel-item img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

HTML #

<div class="container"> 
  <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="images/_1_early_history_and_stamp_1.jpg" class="d-block" alt="books_photo">
      </div>
      <!-- 可添加更多轮播项 -->
    </div>
  </div>
</div>

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