ウインドウの大きさに合わせた画像サイズ調整

締切済

質問者：nao1979nao1979
質問日時：2006/05/12 15:43
回答数：3件

みなさん、こんにちは。今困っている事があります。

手書きの文章とイラストを描いてある一つの画像を、掲載しているホームページをやっています。文字が小さくなるとお客さんが読みづらいと思って、画像の大きさをわざと大きくしています。

しかし、横長の画像なので、それでは小さい画面のパソコンから来てくださっているお客様の場合、画面下（画像の幅の部分）にスクロールバーができてしまい、お客様も不便ですし、サイトデザイン的にも美観を損ねてしまっていて、困っています。

そこで、テーブルタグの width="80%" などのように、お客様のウインドウの大きさに合わせて、パーセンテージで画像の大きさを自動で調整されるようなタグ（HTMLじゃなくてもいいです）があれば、教えていただきたいです。

どうか、よろしくおねがいします。

通報する

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

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.1

回答者： nyonyon
回答日時：2006/05/12 16:18

画面サイズ（解像度）は見る側の環境により様々で違っていて当然です。

ですが、画像は本来のサイズで表示されなければ、サイズより大きな画面で見ている人には、拡大された画像が表示されてしまう事になります。

このため、イラストなどの画像サイトは、小さな画面（800×600を想定）して、最初から画像そのものを縮小しているか
もしくは「サムネイル」を使っているところが多いようです。

目次のような元画像を縮小したサンプル画像を用意しておき、その画像を元のサイズでみたいならば
クリックすれば元のサイズの画像が表示される、といったものです。
こちらの方が見やすく、またページレイアウトもやりやすいかと思いますよ。

この回答への補足

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

しかし、私が横着者なのと、お客様にクリックさせる煩わしさを無くしたいので、サムネイル表示は考慮していません。

小さな画面（800×600）を想定するという考え方は、大変参考になりました。ですが、小さな画面を想定するには、どうすればよいのでしょうか？

パソコンの設定で、800×600にする方法があったら教えてください。お願いします。

補足日時：2006/05/12 16:43

通報する

- 0
- 件

通報する

No.2

回答者： NTJ
回答日時：2006/05/12 16:21

え？（＾＾；

そのままで正解ではないかと思いますよ？

仮に・・・画面上には画像一個しかないとします。

<BODY>
<IMG src="画像ファイル名" width="80%">
</BODY>

これで、一応はイケる筈なんですが・・・？

この回答への補足

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

その方法を試してみたのですが、文字やイラストの線が荒くなってしまいました。

その解消法がありましたら、教えてください。お願いします。

補足日時：2006/05/12 16:48

通報する

- 0
- 件

通報する

No.3

回答者： goldfox
回答日時：2006/05/12 20:03

＞文字やイラストの線が荒くなってしまいました。

画像のサイズを「表示領域の80%」に拡大縮小して表示するのだから、多少荒くなるのは仕方ないです。
width="80%"がどういうものか、横幅100pxくらいの画像でwidth="80%"を指定して表示確認したほうが分かりやすいです。
あるいは800pxの画像をwidth="50%"で見てみるとか。
それでブラウザの右下をドラッグして、横幅を変えてみましょう。

No.1　の方の言っている事に重なりますが、最初から横幅を800px以下のサイズで作成するのが一番いい解決法でしょう。
（ま、800×600の解像度でフルスクリーンで見ていない人も多いですから700px以下が理想的かと）
サムネイルにするにしても小さい画像を用意と考えなくとも同じ画像を使ったり…まあ手間には変わりませんか(汗
<a href="gazo1.jpgを貼り付けたhtml"><img src="gazo1.jpg" width="80%" alt="画像1"></a>

画像を背景にする、という方法もありますが、当然見えない位置も出てきますから……

解像度の変更の仕方は（windowsなら）
画面上で右クリック＞プロパティ＞設定
で可能です。
あるいはスタート＞コントロールパネル＞デスクトップの表示とテーマ＞画面解像度を変更する