Question

我正在使用nivo滑块将图片幻灯片显示在全屏幕上。我使用大约1400乘900px图像。当我放大或缩小浏览器时，一切都很好。我认为当在不同的屏幕尺寸上观看时，图像将不会以其比例显示

HTML

<div id="container">
    <div id="sliders" class="nivoSlider">
        <img src="webimg/slider1.jpg" />
        <img src="webimg/slider2.jpg" />
        <img src="webimg/slider3.jpg" />
        <img src="webimg/slider4.jpg" />
    </div>
</div>

CSS

#container {
    width:100%;
    height:100%;
    overflow:hidden;
    position:fixed;
    top:0px;
    left:0px;
}
.nivoSlider {
    position:fixed;
    top:-16px;
    left:0px;
}
.nivoSlider img {position:absolute;
    top:0px;
    left:0px;
}

/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}

JS

$(window).load(function() {
    $('#sliders').nivoSlider({
        effect: 'random', // Specify sets like: 
        slices: 35, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 3500, // Slide transition speed
        pauseTime: 11000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: false, // Next & Prev navigation
        directionNavHide: false, // Only show on hover
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        keyboardNav: false, // Use left & right arrows
        pauseOnHover: false, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

我想要的是图像每次都应保持全屏。任何帮助表示赞赏。谢谢。请帮我解决一下这个。还请告诉我应该使用的图像大小是1400 * 900像素还可以吗？

Answer 1

在 css 代码中进行此更改，以便在不同屏幕分辨率或浏览器放大/缩小时自动调整大小：

Demo

.nivoSlider img {
  height:  100%;
  width:  100%; 
  top:0px;
  left:0px;
}

Answer 2

使用此：

.nivoSlider {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

如果这不起作用，则将位置固定为绝对值，并将宽度和高度100％添加到CSS中的实际.nivoSlider中。

图像滑块全屏

2 个答案: