- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：ランダム表示に加えwidthをブラウザに合わしたい）
ランダム表示に加えwidthをブラウザに合わしたい
このQ&Aのポイント
- ホームページを作成しています。５枚の画像からランダムで背景に表示する処理に加えて、選ばれた画像のwidthをブラウザに合わせて拡大・縮小したいです。以下ソースのランダム表示の処理に加えて、ブラウザに合わせて画像を拡大・縮小して表示する方法を教えて下さい。
- ホームページで背景画像をランダムに表示する際に、選ばれた画像のwidthをブラウザに合わせて調整したいです。ソースコードでランダム表示の処理を実装しているので、ここにwidth調整の処理を追加したいです。具体的には、選ばれた画像をブラウザの幅に合わせて拡大・縮小したいです。
- ホームページの背景にランダムに画像を表示する処理に加えて、選ばれた画像のwidthをブラウザの幅に合わせて調整する方法を教えてください。現在はソースコードでランダム表示の処理を行っていますが、ここにwidth調整の処理を加えたいです。選ばれた画像をブラウザの幅に応じて拡大・縮小する方法を教えてください。
- yuki_tigers
- お礼率55% (31/56)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
既に回答を頂いているのですが bodyのリサイズいれないと画面のサイズ変更した時に・・・ ↓みたいな感じかな <head> <script type="text/javascript"> function onReady(){ resizeBody(); //別にこれはcssで書いてもいい document.body.style.backgroundSize = "cover"; //BG-IMGを指定するコードを此処に書く } function resizeBody(){ document.body.style.width = window.innerWidth - 50 + "px"; document.body.style.height = window.innerHeight - 50 + "px"; } </script> </head> <body onload="onReady()" onresize="resizeBody()"> </body>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
回答No.2
ANo１です。 ＞html(css)側でどのように、document.body.style.backgroundImage ＞を操作するのでしょうか 別に操作する必要はないと思いますので、最初からＣＳＳで指定しておけばよろしいかと思います。 例えば body { background-size: cover; }
- fujillin
- ベストアンサー率61% (1594/2576)
回答No.1
CSS3なら、background-sizeで指定すればよさそう。 http://www.w3.org/TR/css3-background/#the-background-size
補足
ありがとうございます。 javascriptで設定している背景をどのようにしてhtml(css)側に渡して、background-sizeで指定するのでしょうか？ javascript内の document.body.style.backgroundImage = bgc[n]; で表示処理は全て完了してしまっています。 html(css)側でどのように、document.body.style.backgroundImage を操作するのでしょうか？そこが知りたいです。 他の方でも分かる方がいらっしゃいましたら、よろしくお願いします。