javascript中的图像随机化器

Question

我正在使用我在某处找到的代码制作一个带有图像随机化器的 html 页面。 然而，代码迫使我以像素为单位设置宽度和高度。 因此，当我在 div 上使用代码时，图像不会缩放，这对我使用的流畅布局不利。 （当我在 css 中将宽度设置为 auto 或 100% 时，图像根本不显示） 如何更改代码以使其在流畅的布局中工作？ 这是我的 CSS：

.stretcher {
/*#bg {*/
position: absolute;
left: 0px;
top: 0px;
z-index: -69;
width:1366px;
height:768px;
}

我的 html 的头部：

<script type="text/javascript">
window.onload = function () {
    var header = document.getElementById('bg');
    var pictures = new Array('bgs/1.jpg','bgs/2.jpg','bgs/3.jpg','bgs/4.jpg','bgs/5.jpg');
    var numPics = pictures.length;
    if (document.images) {
        var chosenPic = Math.floor((Math.random() * numPics));
        header.style.background = 'url(' + pictures[chosenPic] + ')';
    }
}

以及正文中的 div：

<div class="stretcher" id="bg"></div>

Answer 1

也许你可以将width和heigth设置为100%，然后将图像设置为背景cover：

JSFiddle

CSS：

.stretcher {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -69;
    width:100%;
    height:100%;
}

JS：

function cycle() {
    var header = document.getElementById('bg');
    var pictures = new Array('http://advancement.georgetown.edu/advent/wallpapers/ui/img/1366x768/SealWP_1366x768.jpg', 'http://www.sonymobile.co.jp/xperia/docomo/so-01d/common/download/wallpaper/1366-768/xperiaplaywp_1366-768_bk02.jpg');
    var numPics = pictures.length;
    if (document.images) {
        var chosenPic = Math.floor((Math.random() * numPics));
        header.style.background = 'url(' + pictures[chosenPic] + ')';
        header.style.backgroundSize = 'cover';
    }
}

cycle();

Answer 2

使用 header.style.backgroundImage 代替，所以它不会覆盖 css， 从我的评论。

var header = document.getElementById('bg');
    var pictures = new Array('http://placekitten.com/g/200/300','http://placekitten.com/g/100/300','http://placekitten.com/g/500/300','http://placekitten.com/g/500/300','http://placekitten.com/g/200/700');
    var numPics = pictures.length;
    if (document.images) {
        var chosenPic = Math.floor((Math.random() * numPics));
        header.style.backgroundImage = 'url(' + pictures[chosenPic] + ')';
    }

.stretcher {
/*#bg {*/
position: absolute;
left: 0px;
top: 0px;
z-index: -69;
width:100%;
height:768px;
    background-size: cover;
    background-position: middle middle;
    background-repeat: no-repeat;
}

.parent {
  width:500px; 
  margin: 0 auto;
}

<div class="parent">
<div class="stretcher" id="bg"></div>
  </div>