javascript - 当通过 jscript 随机选择图像时，图像的动态全尺寸调整大小的问题

Question

我真的只是希望根据用户正在查看的任何监视器分辨率，通过下面的 jscript 加载的任何图像都是全屏的。

var randomImages = new Array("Images/bodybg1.jpg", "Images/bodybg2.jpg", "Images/bodybg3.jpg", "Images/bodybg4.jpg", "Images/bodybg5.jpg");
var randomNumber = Math.floor((randomImages.length - 0) * Math.random()); $('#full-screen-background-image').prop('src', randomImages[randomNumber]);

这是HTML <img alt="no image" id="full-screen-background-image" class="fssi" src="" />

有没有办法动态调整该图像的大小。我在这里尝试了示例：http://jsbin.com/okizi5

但是，我似乎无法调整图像大小。

Answer 1

将图像大小设置为整个页面有效吗？

<img alt="no image" id="full-screen-background-image" class="fssi" src="" style="width: 100%; height: 100%;"/>

更新

无法使用来自服务器的 css 将图像尺寸设置为用户的显示器分辨率。但是您可以通过脚本访问当前的监视器尺寸。因此，将以下脚本添加到您的页面

var img = document.getElementById("full-screen-background-image");
img.width = window.screen.width;
img.height = window.screen.height;

更新 2

如何设置背景图片的尺寸

$('body').css({
     'background-image': 'url(' + randomImages[randomNumber] + ')', 
     'background-repeat': 'no-repeat', 
     'background-size':  window.screen.width + 'px ' + window.screen.height + 'px' 
});