javascript - Owl Carousel 高度调整

我正在建立一个网站，该网站的首页顶部有一个猫头鹰轮播。该网站尚处于初步阶段，因此我对转盘有问题。

我希望轮播保持响应，同时调整图像，使其占据窗口/屏幕的整个高度。换句话说，我不想调整图像的大小。只是随着窗口变小而更新。现在，当窗口调整大小时，它们只是在缩小。

这是我当前的代码：

的HTML

    <section id="sidebar">
        <div id="owl" class="owl-carousel">
            <div class="item" id="item-1"><img src="assets/img/motel.jpg" alt=""></div>
            <div class="item" id="item-2"><img src="assets/img/gas.jpg" alt=""></div>
            <div class="item" id="item-3"><img src="assets/img/sofia.jpg" alt=""></div>
       </div>
    </section>

JS：

    $(document).ready(function() {
        $("#owl").owlCarousel({
            navigation: true,
            slideSpeed: 300,
            paginationSpeed: 400,
            items: 1,
            autoplay: 3000,
            stopOnHover: true,
            loop: true,
        });
    });

CSS：

    #owl .item img {
        display: block;
        widows: auto;
        height: 100%;
        min-height: 523px;
    }

这是到github上完整网站的链接（到目前为止）：https://jnikkiyoke.github.io/project/

任何帮助将非常感激！

最佳答案

最简单的方法是删除<img/>标记并改用background：

.item {
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#item-3{
    background-image: url("assets/img/gas.jpg");
}

您也可以删除min-height上的#owl .item img

您可能还想添加height: 100vh;和width: auto;。将media queries用于不同的比率。

关于javascript - Owl Carousel 高度调整，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43335191/