- ベストアンサー
画像をぴったりウィンドウ内に収めるには？
こんにちは！写真をスキャンで読み、フォトショップで加工し、 WEB用に保存（JPG)しFecthでライコス無料ホームページにアップしました。 ここまではなんとかでき、タグを<img src="++++++">として、表示することまではうまくいきました。 ●ただ、イメージの周りに隙間が空いちゃうんです。 これを隙間なくウィンドウ内に収めるにはどうすればいいんですか？ これをトップページにし、このイメージ自体にリンクを設定して ワンクリックしてメニューページに跳ぶようにするつもりです。 ●また、ウィンドウの右下の四角を、閲覧者が引っ張って大きさを調整するときにこのイメージ以上に大きくしても余白がつかないようにしたいんです。 ●今作成中のこのHPにたどりついた時の、閲覧者が見れる大きさがイメージぴったりの大きさにできればそうしたいです。ちなみに720*519ピクセルです。 質問内容をうまくかけなかったかもしれません。 わからなかったら捕足下さい。 どなたか、教えていただければ幸いです。お願いします☆
- junjunjunya
- お礼率95% (358/376)
- HTML
- 回答数9
- ありがとう数9
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (8)
- yuica
- ベストアンサー率29% (11/37)
えっと,(7)でご紹介したのは、Javascriptでなくて、スタイルシートを使っています。 がんばってくださいね♪
お礼
返事が遅くなってごめんなさい。 ここ数日はHPをいじっている暇もなくて…。 Javascript使っていない方がどちらかと言えば安心しますね。 便利な反面、適用されない人もいるわけですからね。 ありがとうございます☆
- yuica
- ベストアンサー率29% (11/37)
まわりに空きができるときに、真ん中に表示したいというお話でしたら、 <html> <head> <style type="text/css"><!-- body { background-repeat:no-repeat; background-position:50%; } --></style> <body background="写真画像の名前" bgcolor=cccccc> 背景画像がページの中央に一枚だけ表示されます。 </body> </html>
お礼
ありがとうございます！！ こんな感じが今のところはベストですね。 なんだか、簡単でしたね。 でも、気になるのはJavascriptが動いているのか？っていうことです。 また、分からないことがあればおしえてください☆ そのときはもっとうまく質問できるようにしたいです。 ありがとうございました☆
こんにちは。 ばばば、と書いてしまったので、もっとシェイプアップできるはずなんですが、JavaScriptで書いてしまう、という方法で実現してみました。 今、環境がMacなので、Winの動作保証できないんですが、IEとNN4.xで動作します。 動作の流れとしては、 （１）ウィンドウサイズの取得 （２）画像より大きければ、画像をウィンドウサイズに合わせて拡大 （３）画像より小さければ、画像のサイズは初期値 （４）リサイズしたら、ページをリロードし、（１）～（３）の動作を実行 という感じです。 ただし、このスクリプトだとNNの場合ウィンドウサイズにあわせるとスクロールバーがでてしまうので、ウィンドウサイズから3マイナスしてます。 <html> <head> <title>test</title> <script language="javascript"> function getWinsizeW(){ if(document.layers) return window.innerWidth; if(document.all) return document.body.clientWidth; return -1;} function getWinsizeH(){ if(document.layers) return window.innerHeight; if(document.all) return document.body.clientHeight; return -1;} function imgWrite(){ iw = 720; ih = 519; if(document.layers){w = getWinsizeW()-3;h = getWinsizeH()-3;} if(document.all){w = getWinsizeW();h = getWinsizeH();} if(w>iw||h>ih) document.write('<a href=""><img src="goo.gif" width='+w+' height='+h+' border=0></\a>'); if(w<=iw || h<=ih) document.write('<a href=""><img src="goo.gif" width=720 height=519 border=0></\a>'); } var flag flag=!(document.layers&&parseFloat(navigator.appVersion)<4.5&&document.height>window.innerHeight) window.onresize = new Function("if(flag){location.reload()}else{flag=true}") </script> </head> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> <script language="javascript"> <!-- imgWrite(); // --> </script> </body> </html> で上手くいくかと思います。 リンク先は任意で『test.html』にしているので、そこは変えて下さい。 また、ウィンドウリサイズ対応のスクリプトは、mugiさんのページ（http://mugi.ca.tc）にあるスクリプトを参考にしました。
お礼
ありがとうございます！ 恥ずかしながらコピペで試したのですが、 ブラウザがIE５だからなのか、よくわかりませんが、 思ったような効果ではありませんでした。 JAVAスクリプトはまだわからないので…どうすればいいのか よくわかりません。 どこら辺が具体的に思っていた通りではなかったかと言うと、 ●ウィンドウをいろんな形にすると、それに合わせてイメージも 縦長になったり横長に変形してしまう。 ●ウィンドウをいじるたびにたまに縦に同じイメージが地続きになっている。 う～ん、無理なのかな。 どうすりゃ？んんん。 もしかして、下記の回答者の方ののタグと組み合わせるってこと ではないですよね？ 今は。ss_sionさんが教えて下さったタグのみで やってみています。
- yuica
- ベストアンサー率29% (11/37)
窓を小さくすると小さくなってしまうのは、（１）で画像の大きさを私が100％のパーセント表示でご紹介したからです。ごめんなさい。 開く時に窓の大きさを指定するなどの下記のestocさんがご紹介のJAVAスクリプトやを使うのを前提に、 背景に画像を１枚載せる方法をご紹介しますね。 <head>～</head>の中に <style type="text/css"><!-- body { background-repeat:no-repeat;} --></style> <body background="画像の名前" width=画像の横サイズ height=たてのサイズ> 背景画像がページの中央に一枚だけ表示されます。 </body> </html>
お礼
ありがとうございます！！もうひとつ、疑問があるのですが、 ウィンドウの右下のボタンを引っ張るとウィンドウを大きくできますよね？ イメージ以上にウィンドウを大きくしてしまうと右と下に隙間が開いてしまうんです。これを見せたくないのですが、どうすればいいんですか？ ウィンドウがイメージ以上に大きくなったらイメージの周りに灰色？ っぽくなるような感じがいいんですが。
（3）ウィンドウサイズを指定する。 ちょっと調べてみましたら、ウィンドウサイズの指定方法が見つかりましたので、参考にしてみてください。 『最初に開くページのサイズ指定方法』 <HEAD>内に下記内容を加える。 -------------------------------- <SCRIPT LANGUAGE="JavaScript"> <!-- function resizeWindow(){ window.resizeTo(幅,高); } //--> </SCRIPT> -------------------------------- <BODY>タグの中に、 onLoad="resizeWindow()"を付け加える。 -------------------------------- <BODY onLoad="resizeWindow()"> -------------------------------- これで、一旦ページが開いたら、直後にサイズを変更し 望みのウインドウサイズにできるようです。
お礼
ありがとうございます！JavaScriptとはこういうものなんですね。 しかし、まだ、解決されていない問題が。 ●フォトショップの『画像解像度』で表示されたピクセル*ピクセルで 入れたはずなのに若干横長く表示されてしまいます。 ●ウィンドウをちいさくすると画面までもが小さくなってしまいます。 ウィンドウをいじくってもなかのイメージの文字やイラストの大きさは 維持されてほしいのですが。どうか、教えて下さい！
（1）隙間なくウィンドウ内に収める <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> で、隙間がなくなります。 ------------------------------------ leftmargin="0" 左マージン0 （IE用） topmargin="0" 上部マージン0（IE用） marginwidth="0" マージン幅0（NN用） marginheight="0" マージン高0（NN用） ------------------------------------ を<BODY>タグに追加してください。 （2）（3）については、yuicaさんの仰る通りかと。
お礼
ご回答ありがとうございます！ しかし、何の変化もなかったので、変だなぁ？と。 私が使い方を誤っているんでしょうか？
補足
すみません、発見したのですが、no.1のyuikaさんのタグと組み合わせることによって隙間なくやることができるみたいです。 ありがとうございます！
- yuica
- ベストアンサー率29% (11/37)
あと、<HEAD>～</HEAD>の中に <script language="JavaScript"> <!-- resizeTo(720,510); //--> </script> で窓の大きさ指定です。
補足
ありがとうございます。若干横長く見えてしまいますが、 しょうがないのでしょうか？（）のなかの数字の単位ってピクセルなんでしょうか？ ●説明が足りなかった部分があります。 HPをみるときにもし画面上で２センチに見えたら 右下の引っ張るバーを動かそうが、最大化しようが、 ずっと２センチのまま維持したいのです。 このやり方は御存じでしょうか？お願いします！
- yuica
- ベストアンサー率29% (11/37)
<img src="++++++" width=100% height=100%>にすればOKですよ。
お礼
ありがとうございます！ これはうまくいきました！
お礼
おおおおおおっ！！ これぞ、当初、私がやりたかったやり方です！ 今日は久々にいい日だなぁ、って思ってしまいました。 後は、このスクリプトを自分なりに理解しないといけませんね。 頑張ります。今回、丁寧に教えて下さって、ありがとうございました☆ 解決方法が見つかったのでこれにて質問を締め切らせていただきます。