jquery - 让光滑的图像 slider 始终覆盖为背景

Question

我正在使用Slick作为全宽背景 slider 。我只想要一个覆盖整个背景的幻灯片。我的问题是图像似乎只能自动调整到页面的宽度。这意味着如果浏览器变得太窄，图像将不会覆盖整个高度。我想知道是否有一些好的方法来调整图像大小以始终覆盖背景。我希望图像水平或垂直溢出，具体取决于浏览器的宽高比。

显示 slider 的 div 样式为:

#background {
    position: fixed;
    z-index: -2000;
    top:0;
    left:0;
    width:100%;
}

我有一个 jquery 解决方案，似乎可以工作，但我真的不知道这是否是一个好的解决方案:

$($('#background').find('img').first()).on('load', function(){
    var bgWidth = 
        $(window).height() / 
        $('#background').find('img').first().height() *
        $('#background').find('img').first().width();

    // Initiate background slider
    $('#background')
        .slick({
            dots: false,
            autoplay: true,
            autoplaySpeed: 6000,
            pauseOnHover: false,
            fade: true,
            arrows: false,
            mobileFirst: true,
        })
        .css({
            'height':'100%',
            'min-width': bgWidth,
        });
});

是否有更好的解决方案或者这是否足够好？

Answer 1

当 slider 尝试调整图像本身时，另一种选择是将 slider 应用于不是 img 标签的元素，并将图像放置在该容器中，例如:

HTML:

<div class="slider">
    <div>
        <img src="images-01.png">
    </div>
    <div>
        <img src="images-02.png">
    </div>
</div>

CSS:

.slider div {
    height: 100%; 
    width: 100%; 
}
.slider div img{
    height: 100%; 
    width: 100%; 
    object-fit: cover;
}

JS

$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 2000,
});