如何调整Bootstrap Carousel轮播组件的尺寸？已尝试多种方法无效

问题描述 #

无法调整Bootstrap Carousel轮播组件的尺寸，修改多处设置无效。当前轮播占满视口，需要调整其高度和宽度，无需滚动即可查看完整内容。

原HTML代码 #

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

<div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">  
            <div class="carousel-caption">
              <h3>Hotel at Midtown, Chicago IL</h3>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
        </div>
        <div class="item"> 
            <div class="carousel-caption">
              <h3>Hotel at Midtown, Chicago IL</h3>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
        </div>
    </div>
    <!-- 修复：控制按钮需放在carousel-inner外部 -->
    <a class="left carousel-control" href="#carouselFade" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carouselFade" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

原CSS代码（问题点标注） #

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  padding-top:0;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
} 
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
} 
.carousel-caption {
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
  font-size:17px
}
.carousel-caption h3 {
  font-size: 30px;
  font-family: 'Lato', sans-serif;
}
/* 问题核心：这段代码让轮播占满整个视口高度 */
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
  height: 100%;
} 
.item:nth-child(1) {
  background: url("../images/Hotelam1.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.item:nth-child(2) {
  background: url('../images/Hotelam2.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

原JS代码 #

$('#carouselFade').carousel();

解决方案 #

1. 移除全局高度强制设置 #

删除或注释掉以下CSS代码，这是导致轮播占满视口的根本原因：

/* html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
  height: 100%;
} */

2. 自定义轮播尺寸 #

给.carousel设置固定或自适应的宽高，同时保证.carousel-inner和.item的高度匹配：

/* 自定义轮播容器尺寸 */
.carousel {
  width: 80%; /* 可根据需求调整为固定值如800px */
  max-width: 1200px;
  height: 500px; /* 固定高度，或用百分比 */
  margin: 0 auto; /* 居中显示 */
}

/* 确保轮播内容区域匹配容器高度 */
.carousel-inner,
.carousel-inner .item {
  height: 100%;
}

3. 优化背景图显示（可选） #

如果需要背景图完全覆盖轮播区域且不变形，可以微调background-size：

.item:nth-child(1),
.item:nth-child(2) {
  background-size: cover; /* 保持原有设置，或改为contain适应容器 */
  background-position: center;
}

4. 响应式适配（可选） #

添加媒体查询，在小屏幕上自动调整轮播尺寸：

@media (max-width: 768px) {
  .carousel {
    width: 100%;
    height: 300px;
  }
}

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