締切済み

javascriptで画像サイズをウィンドウのサイズに合わせて表示する方法

2009/01/09 00:07

javascriptを最近はじめてみました。しかしどうも慣れないためか、最後の一歩で思うように動いてくれません。基本的にやりたい事はウインドウサイズに合わせて画像サイズを変更できるようにしたいと思ってます。何とかいろいろ調べて、下記のスクリプトまで来たんですが（確かこのサイトの他の方への回答からほぼ活用）これでは画面が表示されるときにスクリプトが適用されません。その後ウィンドウのサイズ変更をすると適用してくれるのですが。なにやらとても簡単な事で上手く動いてくれないのかもしれませんが、どうしてもできそうにありません。どなたかお分かりの方がいましたらご教授願えると大変助かります。よろしくお願いします。以下、javascript↓ <body style="overflow:hidden" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <img src="test.JPG" id="backgroundID" style="position:absolute;top:0px;left:0px;z-index:0;" onload="setSize()"> <div style=" color: black; font-size: medium; font-family: serif; visibility: visible; display: block; position: absolute; z-index: 1; top: -1px; left: 0"> <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>