javascript中的图像随机发生器

我正在用我在某处找到的代码制作一个带有图像随机化器的html页面。 然而，代码迫使我以像素为单位设置宽度和高度。 因此，当我在div上使用代码时，图像不会缩放，这对我使用的流体布局不利。 （当我在css中将宽度设置为自动或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] + ')';
    }
}

window.onload=函数（）{
var header=document.getElementById（'bg'）；
var pictures=newarray（'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>

---

您可能可以将

宽度

和

高度

设置为100%，然后将图像设置为背景

封面

：

CSS:

JS:

---

改用header.style.backgroundImage，这样它就不会覆盖css， 从我的评论来看

var header=document.getElementById（'bg'）；
var pictures=新数组（'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{
/*#背景{*/
位置：绝对位置；
左：0px；
顶部：0px；
z指数：-69；
宽度：100%；
高度：768px；
背景尺寸：封面；
背景位置：中位；
背景重复：无重复；
}
.家长{
宽度：500px；
保证金：0自动；
}

当

位置设置为
相对
时，它是否也不起作用？使用
背景尺寸：封面
我假设
#bg
不是页面上的唯一元素。您如何设置父元素的样式？代码不会完全缩放div，因此在较小的屏幕（平板电脑、手机）上查看时图像只显示了一部分。我尝试了很多方法，比如将div放在另一个div中，摆弄css属性，但我无法让它按我想要的方式工作。还有其他建议吗？如果你想显示整个img，请使用contain而不是cover
.stretcher {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -69;
    width:100%;
    height:100%;
}

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();