Question

我正在使用我在某处找到的代码创建一个带有图像随机函数的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] + ')';
    }
}

和身体中的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>

javascript中的图像随机数发生器

2 个答案: