Bootstrap轮播组件CSS设置width生效但height不生效问题

问题描述 #

调试Bootstrap Carousel组件时，为.carousel-item类设置width:300px可正常生效，但设置height:500px却无效果。相关代码如下：

HTML代码 #

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="..." style="background-color: red;">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="..." style="background-color: yellow;">
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="..." style="background-color: blue;">
      </div>
    </div>
</div>

CSS代码 #

.carousel-item{
    height: 500px;
    width: 300px; 
}

原因分析 #

• 宽度生效是因为内部img使用了w-100类（即width:100%），会直接继承父元素.carousel-item的宽度设置。
• 高度无效的核心原因：img默认高度为auto，会根据自身宽高比自动计算高度，导致.carousel-item被img的实际高度撑开，无法应用你设置的固定高度；同时Bootstrap默认的.carousel-inner没有固定高度，也会间接影响子元素高度的生效。

解决方案 #

方案1：保持图片比例填充容器（推荐） #

同时给.carousel-inner和.carousel-item设置固定高度，再让img填满容器并保持比例：

.carousel-inner, .carousel-item {
    height: 500px;
    width: 300px;
}
.carousel-item img {
    height: 100%;
    object-fit: cover; /* 保持图片比例，裁剪多余部分填充容器 */
    /* 若需要完整显示图片，可替换为object-fit: contain; */
}

方案2：强制拉伸图片填满容器 #

如果不需要保持图片比例，直接让img继承父元素的高度：

.carousel-item {
    height: 500px;
    width: 300px;
}
.carousel-item img {
    height: 100%;
    width: 100%;
}

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