Owl Carousel多张不同尺寸图片轮播时如何填充剩余空白高度

修复方案 #

问题根因 #

1. 仅给图片设置了固定宽度，未限制高度，object-fit: cover 需同时指定宽高才会按比例填充容器，导致不同尺寸的图片展示比例异常
2. Owl Carousel默认取所有轮播项的最大高度作为容器高度，高度更小的图片下方就会出现多余空白
3. 第三张图片本身分辨率较低，未做适配处理所以展示尺寸偏小

修改代码 #

1. 调整CSS样式

替换原有CSS为以下内容：

body { 
  background-color: green; 
  margin: 0; /* 清除浏览器默认body边距 */
}

.owl-prev, .owl-next {
  font-size: 65px !important;
}

.owl-carousel .owl-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* 若不需要裁剪图片，可改为contain */
  display: block; /* 清除图片默认下方的3px间隙 */
}

.mydiv {
  border: 2px solid red;
  width: 614px !important;
  /* 若需要固定容器高度，可在此处加 height: xxxpx 规则，数值按需求调整 */
}

2. 调整Owl Carousel初始化参数

新增autoHeight: true配置，让容器高度自动适配当前展示的图片高度，消除空白：

$(document).ready(() => {
    var owl = $('.mydiv').owlCarousel({
        items: 1,
        dots: true,
        nav: true,
        loop: false,
        autoplay: false,
        autoplayHoverPause: true,
        mouseDrag: false,
        autoHeight: true, // 新增自动适配高度配置
    });
})

可选调整项 #

• 若不希望图片被裁剪，把object-fit: cover改为object-fit: contain，同时给.owl-item设置和页面一致的背景色，填充图片完整展示后留下的侧边/上下空白
• 若需要所有轮播项高度统一，删除autoHeight: true配置，给.mydiv设置固定高度即可，所有图片会自动按比例填充这个固定尺寸容器

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