图像滑块全屏

Question

我正在使用 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>

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

使用这个：

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

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

Answer 2

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

Demo

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