Bootstrap 4 Carousel高度自定义问题：无法修改轮播高度

我懂你想让轮播图摆脱图片自身高度的束缚，用自己指定的高度展示，但试了好几种CSS都没见效的烦恼！其实这是因为Bootstrap的轮播组件默认靠图片尺寸撑高容器，咱们得给整个轮播的层级结构都设置好高度，再调整图片的适配方式才行。

直接给你能生效的CSS代码，你可以按需修改高度值：

/* 给整个轮播容器设置固定高度 */
#carouselExampleIndicators {
  height: 400px; /* 这里改成你想要的高度 */
  overflow: hidden; /* 防止内容溢出容器 */
}

/* 让轮播内部容器和轮播项都继承容器高度 */
.carousel-inner, .carousel-item {
  height: 100%;
}

/* 处理轮播图的适配，保持比例同时填满容器 */
.carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* 关键属性！图片按比例覆盖容器，不会拉伸变形 */
}

代码说明： #

• 先给最外层的#carouselExampleIndicators设置固定高度，加上overflow: hidden避免图片超出容器时出现滚动条。
• 让.carousel-inner和.carousel-item都继承100%高度，确保整个轮播的层级结构都能撑到你指定的高度。
• 最后给img设置宽高100%，再用object-fit: cover让图片按比例填满容器，既不会变形，又能完全覆盖你设置的高度区域。

如果想要响应式高度（比如手机端用更小的高度），可以搭配媒体查询：

@media (max-width: 768px) {
  #carouselExampleIndicators {
    height: 250px; /* 手机端的自定义高度 */
  }
}

把这些CSS加到你的样式里，就能轻松掌控轮播图的高度啦！

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