Javascript 全屏图像滑块

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

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>

JS

#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;
}

$(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像素是否合适？

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

使用以下命令：

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

---

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

为什么最大宽度？我们不能改为指定“宽度：100%”和“高度：100%”。使用

top:0不是更好吗；左：0；右：0；底部：0？@lindsay我用那个代码测试过，不起作用，你可以玩<代码>高度：100%；宽度：100%使调整大小发生
.nivoSlider {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}