让 Slick 图像滑块始终覆盖为背景答案

【问题标题】：Getting Slick image slider to always cover as background让 Slick 图像滑块始终覆盖为背景
【发布时间】：2015-05-02 15:35:56
【问题描述】：

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

显示滑块的 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,
        });
});

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

【问题讨论】：

标签： jquery

【解决方案1】：

当滑块尝试自行调整图像时，另一种选择是将滑块应用于不是 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;
}

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

【讨论】：

【解决方案2】：

height = 100% 是相对于容器元素的，所以除非#background 的所有父元素都将height 设置为100%，否则它将不起作用。所以，如果你想要一个纯 CSS 的解决方案，你需要以下几行：

html, body, .another-element, #background {
  height: 100%;
}

假设如下标记：

<html>
  <body>
    <div class="antoher-element">
      <div id="background">

但是，我认为您的解决方案没有问题，当然，除非没有 JS 就无法工作。

【讨论】：

【解决方案3】：

这将使您的光滑滑块成为背景全角滑块。

在 slider.css 上转到第 2 行，并在 .slick-slider 下添加以下规则：

position: absolute !important;  width: 100%;  z-index: -1;

然后，在您的 html 上：

<div class="slider">
 <div class="a-slide slide1"></div>
 <div class="a-slide slide2"></div>
</div>

也添加这个 css

.a-slide { height: 100%; width: 100%; background-size: cover !important;}
.slick-slider{ height: 100%;}
.slide1 {background:url(../img/slider01.png) no-repeat center;}
.slide2 {background:url(../img/slider01.png) no-repeat center;}

【讨论】：

您好，欢迎来到 SO。发布代码时要更加小心，使其尽可能具有可读性。感谢您的回答！