javascript - 在html上将图像拉伸(stretch)到全屏

Question

我有这段代码，它随机显示背景图像。我放大了图像的大小并降低了字节数以降低加载速度。但是，我希望图像能够根据屏幕尺寸调整大小。

<script type="text/javascript">
    var randnum = Math.random();
    var inum = 3;
    var rand1 = Math.round(randnum * (inum - 1)) + 1;
    images = new Array();
    images[1] = "bgImages/Blue_Venetian_Glass.jpg";
    images[2] = "bgImages/Etched Glass.jpg";
    images[3] = "bgImages/glass.jpg";
    images[4] = "bgImages/Raindrops_on_Glass.jpg";
    var image = images[rand1];
    document.body.style.background = 'url("' + image + '") no-repeat center center fixed';
</script>

我的问题是“我需要什么来使图像拉伸(stretch)”

Answer 1

实现该效果的最佳方法是使用 div，其中图像绝对定位，您可以设置样式。

在 </body> 之前添加 HTML :

<div align="center"><img src="images/BG.jpg" id="bg"></div>

CSS:

#bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;
}

Javascript:

var randnum = Math.random();
var inum = 3;
var rand1 = Math.round(randnum * (inum - 1)) + 1;
images = new Array();
images[1] = "bgImages/Blue_Venetian_Glass.jpg";
images[2] = "bgImages/Etched Glass.jpg";
images[3] = "bgImages/glass.jpg";
images[4] = "bgImages/Raindrops_on_Glass.jpg";
var image = images[rand1];
document.getElementById('bg').src = image;