时间戳

首页 > 解决方案 > owl carousel 填充多张图片的空白高度

html - owl carousel 填充多张图片的空白高度

问题描述

我正在使用 owl carousel 最新版本，但我遇到了一个小问题。我有 3 张不同大小的图像。

我的名为“mydiv”的主 div 必须具有 614px 宽度。

所以，现在，如果你能看到，看图像你会发现高度有问题（第一个有更大的宽度，第二个有更高的高度，最后一个有点小），图像之间的空间太大和页面底部。

我该如何修复或如何填充空白空间？

$(document).ready(() => {


    var owl = $('.mydiv').owlCarousel({
        items: 1,
        dots: true,
        nav: true,
        loop: false,
        autoplay: false,
        autoplayHoverPause: true,
        mouseDrag: false,
    });
    


})
body { background-color: green; }

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

.owl-carousel .owl-item img {
  width: 614px !important;
  object-fit: cover;
}

.mydiv {
border: 2px solid red;
width: 614px !important;
}
<html>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />

    <body>
        <div class="mydiv owl-carousel">
            <img src="https://wallpapercave.com/wp/wp5405231.jpg" alt="cristiano post" class="newsfeed-show-img-display">
                            <img src="https://i.pinimg.com/originals/0b/3a/56/0b3a56ce1b5f0433f15a11115182b900.jpg" alt="cristiano post" class="newsfeed-show-img-display">
                            <img src="https://i.pinimg.com/170x/cd/b2/07/cdb207efa5fb886defac79b7ac646f93.jpg" alt="cristiano post" class="newsfeed-show-img-display">
        </div>
        

        <!-- JQUERY -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
        
        <!-- OWL CAROUSEL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
    </body>
</html>

标签： htmlcss

解决方案

您可以将 owl-stage 显示设置flex为 100% 高度的目标图像。

.owl-carousel .owl-stage {
    display: flex;
}

.owl-carousel .owl-item img {
    width: auto;
    height: 100%;
}


$(document).ready(() => {


    var owl = $('.mydiv').owlCarousel({
        items: 1,
        dots: true,
        nav: true,
        loop: false,
        autoplay: false,
        autoplayHoverPause: true,
        mouseDrag: false,
    });
    


})
body { background-color: green; }

.owl-prev, .owl-next {
  font-size: 65px !important;
}
.owl-carousel .owl-stage {
  display: flex;
}
.owl-carousel .owl-item img {
  width: 614px !important;
  object-fit: cover;
  height: 100%;
}

.mydiv {
border: 2px solid red;
width: 614px !important;
}
<html>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />

    <body>
        <div class="mydiv owl-carousel">
            <img src="https://wallpapercave.com/wp/wp5405231.jpg" alt="cristiano post" class="newsfeed-show-img-display">
                            <img src="https://i.pinimg.com/originals/0b/3a/56/0b3a56ce1b5f0433f15a11115182b900.jpg" alt="cristiano post" class="newsfeed-show-img-display">
                            <img src="https://i.pinimg.com/170x/cd/b2/07/cdb207efa5fb886defac79b7ac646f93.jpg" alt="cristiano post" class="newsfeed-show-img-display">
        </div>
        

        <!-- JQUERY -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
        
        <!-- OWL CAROUSEL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
    </body>
</html>

推荐阅读