1.width や height を使ってみる!
デジカメ等で撮影した写真をホームページにのせたいことってありますよね。
画像ファイルをimgフォルダに収めてホームページを表示させてみるとやたらサイズが大きすぎて画面に収まりきれなくなってしまいますね。
画像の表示サイズを調整するには
上のようにスタイルシートで「width」や「height」を使う方法もあります。
(もちろん、style.cssでクラス(class)を作ってもかまいませんよ!)
スタイルシートについては CSSファイルの役割 から数ページに渡って書いてあります。

上の画像は サンプルのホームページ で使用している画像を縦に縮めて、横に引き伸ばしてみたものです。
「width」や「height」を使うとこのように元の画像(写真)を引き伸ばしたり縮めたりすることができます。結構面白いですね!
元の画像の比率を変えないで縮小、拡大する時は、「width(幅)」か「height(高さ)」どちらか一方のみを指定してやればOKです。
2.画像縮小ソフトを使おう!
とっても便利に思える「width」や「height」ですが、困ったこともあるんです。
デジカメ等で写真を撮ると元のサイズは結構大きく、ブラウザの画面に入りきれないほどですね。
これを「width」や「height」で縮小しても画面の表示上は縮小されて表示されますが、「width」や「height」はあくまでも画像の表示サイズが小さくなるだけで元の画像は大きいままなんです。
画像が大きいということはそれだけ、容量が大きくホームページの表示速度も遅くなってしまいます。
元が巨大な画像を何枚も同じページに貼り付けていくといつまでたってもホームページが表示されないなんてことになるかもしれません。
又、アップする画像の大きさを制限している画像掲示板もあるみたいです。
こんな時に元の画像を最初から縮小しておけば何の問題もありませんね!
あるんです!そんな便利なソフトが!無料で!
有限会社インターセクション のホームページに行っていただき、「縮小専用」のページからダウンロードできます。

このソフトも非常に分かりやすい優れもので、縮小するサイズを指定して、縮小したい画像を右下の「画像ファイルをここにドラッグ&ドロップしてください」のところに持っていくだけで縮小画面を作成してくれます。ホントにすばらしいソフトだと思います!!


