0

ユーザーが見ているモニターの解像度に基づいて、以下の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

ただし、画像のサイズを変更できないようです。

4

1 に答える 1

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' 
});
于 2013-09-23T16:20:51.937 に答える