こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ブラウザのウィンドウサイズに合わせて背景画像を拡大縮小する、jsのコードはありませんか?(html内に記述。)

htmlとcssはほんの少しわかりますが、javascriptは目下勉強中の者です。
質問させてください。

ブラウザのウィンドウの大きさに合わせて、ページの背景画像が『拡大・縮小』してくれる様なjavascriptのコードはありませんでしょうか。

自分で調べてみましたが、flashによる処理しかなく、どうにかjavascriptでできないものか悩んでいます。

http://www.ex-yz.com/labo/flash/sample/noscale/sample.html

上記のページはflashによるものだそうですが、リサイズのイメージはこういったものを実現したいです。

どなたか教えて下さる方がいらっしゃれば、よろしくお願いします。

投稿日時 - 2008-03-20 00:12:53

QNo.3877907

困ってます

質問者が選んだベストアンサー

面白そうだったので作ってみました。
ちょっとサンプルとは違うけど。。

背景画像そのままだと多分出来ないので、レイヤーを使った感じにしました。


<body>
<img src="43442.jpg" id="backgroundID" style="position:absolute;top:0px;left:0px;z-index:0;" onload="setSize()">
<div style="position:absolute;top:0px;left:0px;z-index:1;">
<script type="text/javascript">
var imgObj = document.getElementById('backgroundID');
var imgSize = {w:0, h:0}
window.onresize = setImg;
window.onscroll = function() {
var t, l;
if (document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
} else if (document.body.scrollTop) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
} else {
return;
}
imgObj.style.top = t + 'px';
imgObj.style.left = l + 'px';
}
function setSize() {
imgSize.w = imgObj.width;
imgSize.h = imgObj.height;
}
function setImg() {
var wh, pW, pH, c;

wh = getWindowSize();

pW = wh.w / imgSize.w;
pH = wh.h / imgSize.h;
if (pW > 0 || pH > 0) {
c = (pW > pH) ? pW : pH;
imgObj.style.width = parseInt(imgSize.w * c + 1) + 'px';
imgObj.style.height = parseInt(imgSize.h * c + 1) + 'px';
} else {
imgObj.style.width = imgSize.w + 'px';
imgObj.style.height = imgSize.h + 'px';
}
}
function getWindowSize() {
var wh = {w:0, h:0};
if (document.body.clientWidth) {
wh.w = document.body.clientWidth
wh.h = document.body.clientHeight;
} else if(document.documentElement.clientWidth) {
wh.w = document.documentElement.clientWidth;
wh.h = document.documentElement.clientHeight;
} else if(window.innerWidth) {
wh.w = window.innerWidth;
wh.h = window.innerHeight;
}
return wh;
}
</script>

<body>タグの直下に上記のようなのを入れる。
</body>タグの直前に</div>を入れれば出来ると思います。

・・・こんなのはどうでしょう?
ちょっと邪道ですが。

投稿日時 - 2008-03-20 01:34:28

お礼

本当にありがとうございます。

このソースでうまく動作しましたので、目的が達成できそうです。

>ちょっと邪道ですが。

参考書を見て、Window.innerWidthなどのプロパティも理解でき、大変役にたちました。

ありがとうございました。

投稿日時 - 2008-03-20 21:11:19

ANo.1

このQ&Aは役に立ちましたか?

8人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

こんにちは

背景画像のサイズ変更はできないのでひと工夫いりますが、サイトのようなものでしたらjavascriptを使用しなくてもできそうですね・・・

<style type="text/css"><!--
html,body {
margin:0px;
width:100%;
height:100%;
overflow:hidden;
}
--></style>

<img src="sample1.jpg" style="width:100%;height:100%;position:absolute;top:0px;left:0px;">

<div style="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;">
<img src="sample0.jpg" style="width:100%;height:100%;">
</div>

※<div>のmargin-top,margin-left;は<div>のheight,widthの半分の値になります
※順不同で作るのでしたらz-indexコントロールしてください

※ただサイトのように背景画のwidth,heightの最小値設定はできていません
そちらの方はjavascriptを使用することになると思いますが(一応作ってみたのですが)javascriptによるサイズ変更すると拡大するときに画面がパチパチしてとても見づらかったので省きます(良い方法を知っておられる方がいればいいのですが・・・)

投稿日時 - 2008-03-20 07:05:48

お礼

回答ありがとうございます。

上記のように試してみた所、二つのサイズのの画像が重なって表示されてしまい、うまくいきませんでした。。

ですが、"1"さんが書いてくださったコードを試して見た所、うまく解決しそうです!ありがとうございます。

投稿日時 - 2008-03-20 21:04:43

ANo.3

<html>
<body>
<img src="hana.gif" style="position:absolute; top:0px;left:0px;" id="b">
<div style="position:absolute; top:0px;left:0px;">
<br>
ここに適当に書いておくれ!<br>
画像の名前を適当にかえて!<br>
</div>
<script>
window.onresize = i;
window.onload =i;
function i(){
o=document.getElementById('b');
o.style.width = document.body.clientWidth;
o.style.height = document.body.clientHeight;
}
</script>
</body></html>

投稿日時 - 2008-03-20 06:49:50

お礼

返事が遅くなりました。

これは他の質問サイトで既出でしたので、試してみましたがうまくいきませんでした。

けれど抜け落ちていた部分を補完してくださったのですね。

ありがとうございます。(ですが、やっぱり目的のようには表示されませんでした。)

投稿日時 - 2008-03-20 20:54:45

ANo.2

onload時のを書くのを忘れてました。
イベントの書き方も結構適当に書いちゃったので、もし使うのであればaddEventListenerやら上手く書き換えてください。

投稿日時 - 2008-03-20 01:37:21

補足

すごい!!すばやい回答ありがとうございます!

早速、挑戦してみたいと思います。
何せjavascriptは完全に初心者なものでして。。

ですので、もし失礼でなければ、欠落部分についても補足して頂けるとありがたいです!

投稿日時 - 2008-03-20 03:27:41

お礼

【すいません。。補足欄にお礼を書いてしまいました】
すごい!!すばやい回答ありがとうございます!

早速、挑戦してみたいと思います。
何せjavascriptは完全に初心者なものでして。。

ですので、もし失礼でなければ、欠落部分についても補足して頂けるとありがたいです!

投稿日時 - 2008-03-20 03:30:06

あなたにオススメの質問