Bootstrap轮播组件内div高度设置与图片无裁剪高度适配方法

原有代码问题说明 #

• 之前设置的min-height: 100%无效，是因为.carousel-item的父级.carousel-inner没有预设固定高度，百分比高度需参照父级尺寸计算，无参照物时不会生效。
• 原有.carousel-inner img的width: 100%; height: 100%设置，在容器和图片原始宽高比不匹配时，会导致图片拉伸或强制裁剪。

调整步骤 #

1. 修正图片基础样式 #

新增object-fit属性保证图片等比缩放、完全显示不裁剪不拉伸：

.carousel-inner img {
  width: 100%;
  height: 100%;
  /* 新增：等比缩放，完整显示图片 */
  object-fit: contain;
  /* 新增：避免图片超出容器宽度时被意外裁切 */
  max-width: 100%;
}

2. 修改移动端媒体查询代码 #

替换原有无效的min-height: 100%，改为你需要的固定高度（可根据实际需求调整数值，支持px/vh等单位）：

@media (max-width: 991px) {
  .carousel-item {
    /* 替换为你需要的最小高度，例：350px / 50vh，可自行调整 */
    min-height: 350px;
    width: 100%;
    /* 可选：让图片在容器内居中，避免留白偏移 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

可选适配方案 #

如果你的需求是让图片宽度完全撑满容器，高度随宽度等比缩放，仅限制容器最小高度，可以调整移动端的img样式：

@media (max-width: 991px) {
  .carousel-item {
    min-height: 350px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .carousel-inner img {
    /* 宽度撑满容器，高度自动计算，保持原始比例 */
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: unset;
  }
}

注意：如果需要图片完全填满容器且无留白，可将object-fit改为cover，但该模式会裁切图片超出容器的部分，不符合无裁剪需求，谨慎使用。
提示：给.carousel-item设置flex布局不会影响Bootstrap轮播的原有滑动、切换逻辑，仅调整内部图片的对齐方式。

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