アプリでもっと教えて！goo

プロが教えるわが家の防犯対策術！

画像をぴったりウィンドウ内に収めるには？

解決済

質問者：junjunjunya
質問日時：2002/05/14 14:45
回答数：9件

こんにちは！写真をスキャンで読み、フォトショップで加工し、
WEB用に保存（JPG)しFecthでライコス無料ホームページにアップしました。
ここまではなんとかでき、タグを<img src="++++++">として、表示することまではうまくいきました。
●ただ、イメージの周りに隙間が空いちゃうんです。
これを隙間なくウィンドウ内に収めるにはどうすればいいんですか？

これをトップページにし、このイメージ自体にリンクを設定して
ワンクリックしてメニューページに跳ぶようにするつもりです。

●また、ウィンドウの右下の四角を、閲覧者が引っ張って大きさを調整するときにこのイメージ以上に大きくしても余白がつかないようにしたいんです。

●今作成中のこのHPにたどりついた時の、閲覧者が見れる大きさがイメージぴったりの大きさにできればそうしたいです。ちなみに720*519ピクセルです。

質問内容をうまくかけなかったかもしれません。
わからなかったら捕足下さい。
どなたか、教えていただければ幸いです。お願いします☆

この質問への回答は締め切られました。

質問の本文を隠す

回答 (9件)

No.1

回答者： yuica
回答日時：2002/05/14 14:50

<img src="++++++" width=100% height=100%>にすればOKですよ。

- 0
- 件

この回答へのお礼

ありがとうございます！
これはうまくいきました！

お礼日時：2002/05/14 21:52

No.2

回答者： yuica
回答日時：2002/05/14 15:04

あと、<HEAD>～</HEAD>の中に

<script language="JavaScript">



</script>

で窓の大きさ指定です。

この回答への補足

ありがとうございます。若干横長く見えてしまいますが、
しょうがないのでしょうか？（）のなかの数字の単位ってピクセルなんでしょうか？

●説明が足りなかった部分があります。
HPをみるときにもし画面上で２センチに見えたら
右下の引っ張るバーを動かそうが、最大化しようが、
ずっと２センチのまま維持したいのです。
このやり方は御存じでしょうか？お願いします！

補足日時：2002/05/14 22:00

- 0
- 件

No.3

回答者： noname#3077
回答日時：2002/05/14 15:12

（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さんのタグと組み合わせることによって隙間なくやることができるみたいです。
ありがとうございます！

補足日時：2002/05/14 21:58

- 0
- 件

この回答へのお礼

ご回答ありがとうございます！
しかし、何の変化もなかったので、変だなぁ？と。
私が使い方を誤っているんでしょうか？

お礼日時：2002/05/14 21:56

No.4

回答者： noname#3077
回答日時：2002/05/14 15:23

（3）ウィンドウサイズを指定する。

ちょっと調べてみましたら、ウィンドウサイズの指定方法が見つかりましたので、参考にしてみてください。

『最初に開くページのサイズ指定方法』

<HEAD>内に下記内容を加える。
--------------------------------
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
--------------------------------

<BODY>タグの中に、
onLoad="resizeWindow()"を付け加える。
--------------------------------
<BODY onLoad="resizeWindow()">
--------------------------------

これで、一旦ページが開いたら、直後にサイズを変更し
望みのウインドウサイズにできるようです。

- 0
- 件

この回答へのお礼

ありがとうございます！JavaScriptとはこういうものなんですね。
しかし、まだ、解決されていない問題が。
●フォトショップの『画像解像度』で表示されたピクセル*ピクセルで
入れたはずなのに若干横長く表示されてしまいます。
●ウィンドウをちいさくすると画面までもが小さくなってしまいます。
ウィンドウをいじくってもなかのイメージの文字やイラストの大きさは
維持されてほしいのですが。どうか、教えて下さい！

お礼日時：2002/05/14 22:38

No.5

回答者： yuica
回答日時：2002/05/15 09:00

窓を小さくすると小さくなってしまうのは、（１）で画像の大きさを私が100％のパーセント表示でご紹介したからです。

ごめんなさい。

開く時に窓の大きさを指定するなどの下記のestocさんがご紹介のJAVAスクリプトやを使うのを前提に、
背景に画像を１枚載せる方法をご紹介しますね。

<head>～</head>の中に

<style type="text/css"></style>

<body background="画像の名前" width=画像の横サイズ height=たてのサイズ>

背景画像がページの中央に一枚だけ表示されます。
</body>
</html>

- 0
- 件

この回答へのお礼

ありがとうございます！！もうひとつ、疑問があるのですが、
ウィンドウの右下のボタンを引っ張るとウィンドウを大きくできますよね？
イメージ以上にウィンドウを大きくしてしまうと右と下に隙間が開いてしまうんです。これを見せたくないのですが、どうすればいいんですか？
ウィンドウがイメージ以上に大きくなったらイメージの周りに灰色？
っぽくなるような感じがいいんですが。

お礼日時：2002/05/15 17:03

No.6

回答者： noname#5841
回答日時：2002/05/15 17:42

こんにちは。

ばばば、と書いてしまったので、もっとシェイプアップできるはずなんですが、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">

</script>
</body>
</html>

で上手くいくかと思います。
リンク先は任意で『test.html』にしているので、そこは変えて下さい。

また、ウィンドウリサイズ対応のスクリプトは、mugiさんのページ（http://mugi.ca.tc）にあるスクリプトを参考にしました。

- 0
- 件

この回答へのお礼

ありがとうございます！
恥ずかしながらコピペで試したのですが、
ブラウザがIE５だからなのか、よくわかりませんが、
思ったような効果ではありませんでした。
JAVAスクリプトはまだわからないので…どうすればいいのか
よくわかりません。
どこら辺が具体的に思っていた通りではなかったかと言うと、
●ウィンドウをいろんな形にすると、それに合わせてイメージも
縦長になったり横長に変形してしまう。
●ウィンドウをいじるたびにたまに縦に同じイメージが地続きになっている。

う～ん、無理なのかな。

どうすりゃ？んんん。
もしかして、下記の回答者の方ののタグと組み合わせるってこと
ではないですよね？
今は。ss_sionさんが教えて下さったタグのみで
やってみています。

お礼日時：2002/05/15 18:51

No.7

回答者： yuica
回答日時：2002/05/16 09:20

まわりに空きができるときに、真ん中に表示したいというお話でしたら、

<html>
<head>
<style type="text/css"></style>
<body background="写真画像の名前" bgcolor=cccccc>
背景画像がページの中央に一枚だけ表示されます。
</body>
</html>

- 0
- 件

この回答へのお礼

ありがとうございます！！
こんな感じが今のところはベストですね。
なんだか、簡単でしたね。
でも、気になるのはJavascriptが動いているのか？っていうことです。

また、分からないことがあればおしえてください☆
そのときはもっとうまく質問できるようにしたいです。
ありがとうございました☆

お礼日時：2002/05/16 17:00

No.8

回答者： yuica
回答日時：2002/05/17 09:14

えっと,(7)でご紹介したのは、Javascriptでなくて、スタイルシートを使っています。

がんばってくださいね♪

- 0
- 件

この回答へのお礼

返事が遅くなってごめんなさい。
ここ数日はHPをいじっている暇もなくて…。
Javascript使っていない方がどちらかと言えば安心しますね。
便利な反面、適用されない人もいるわけですからね。
ありがとうございます☆

お礼日時：2002/05/19 19:41

No.9ベストアンサー

回答者： noname#5841
回答日時：2002/05/17 12:14

こんにちは。

返事遅くなりました。No.6で回答したss_sionです。

私、難しく考えてしまっていたようで（^^;

以下ではどうでしょう？？
一応、画像にリンク張る、というのが目的の一つだという前提です。

<HTML>
<HEAD>
<TITLE>test</TITLE>
<script language="javascript">

function winResize(){
iw = 720;
ih = 519;
if(document.layers) {
w1 = window.outerWidth;
w2 = window.innerWidth;
h1 = window.outerHeight;
h2 = window.innerHeight;
w = w1-w2+iw;
h = h1-h2+ih;}
if(document.all) {
w=iw+4;
h=ih+85;}
window.resizeTo(w,h);
}
</script>

</HEAD>

<BODY bgcolor="#CCCCCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="winResize();" SCROLL="no">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<TR>
<TD align="center" valign="middle"><a href=""><img src="goo.gif" width=720 height=519 border=0></a></TD>
</TR>
</TABLE>
</BODY>
</HTML>

ウィンドウの自動リサイズを前提で組んでみました。
ただ、NetscapeとIEではスクリプトが対応していたり、していなかったり、といろいろあって、あくまで、擬似的な感じになっています。

まずは、お試しください・・・。

- 0
- 件

この回答へのお礼

おおおおおおっ！！
これぞ、当初、私がやりたかったやり方です！
今日は久々にいい日だなぁ、って思ってしまいました。
後は、このスクリプトを自分なりに理解しないといけませんね。
頑張ります。今回、丁寧に教えて下さって、ありがとうございました☆
解決方法が見つかったのでこれにて質問を締め切らせていただきます。

お礼日時：2002/05/19 20:07

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

似たような質問が見つかりました

WordPress（ワードプレス）ワードプレスで、投稿一覧ページにタグを表示する方法投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
その他（Microsoft Office） windows10で作業を終了する際の「保存しますかはいいいえ」を表示させずに自動で保存する方法 6 2023/03/15 11:29
Visual Basic（VBA）【VBA】写真の縦横比を変えずに貼り付ける 5 2023/06/13 11:42
Excel（エクセル） excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
その他（プログラミング・Web制作） pythonで、tkinterとpillowの組み合わせ 2 2022/08/16 17:42
その他（OS） Windowsで大量の画像サイズを半自動で変更する方法 6 2023/02/17 08:45
その他（IT・Webサービス） WEBサイト内のファイルを探す方法は？ 1 2022/11/11 16:38
JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
フリーソフト倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55

関連するカテゴリからQ&Aを探す

ページトップ

おすすめ情報

質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報