画像を決まった比率で縮小したい

製品案内のホームページを作成しています。
製品を選択するためにサムネイルで一覧を作りたいのです。

製品画像はすべて同じ縮小比率になるように作成してあるのですが、
（たとえば、100mm四方のものは100ピクセル四方、
50mm四方のものは50ピクセル四方という感じで製品画像を用意してあります）
サムネイル画像をひとつひとつ作成するのは面倒なので、
スタイルシートなどの機能で製品画像を縮小したもので代用しようと思います。

サイズが重要な製品（というより各製品の違いがサイズだけ）なので、
たとえば50×50ピクセル以内の大きさのサムネイル画像を作成したいときに、
小さいものは小さく、表示したいのです。
（上記例では、100mm四方のものを50ピクセル四方、
50mm四方のものは25ピクセル四方という感じに）

IEならば、最大サイズの製品を基準にzoomスタイルを使用すればいいのですが、
他のブラウザでどうすればいいのか悩んでいます。
transform:scaleを使用すると、元の画像サイズのスペースが周囲にとられてしまうので
何か他に方法は無いでしょうか?JavaScriptかなにかで画像サイズを取得して
寸法指定するしかないのでしょうか?

サムネイル画像を作ればいいだけの話なんですけどね…

No.1 回答者： aoumiushi 回答日時： 2011/08/25 14:13

CSSを利用し幅と高さを％で指示してあげます。

もし画像全部を縮小するなら以下のようにします
/*css部*/
img {
width: 50%;
height: 50%;
}

一部の画像を縮小するなら <div>～<div>でくくってあげます。
<div>～<div>中のimgのみ縮小されます。
/*css部*/
div.thumbnail img {
width: 50%;
height: 50%;
}

/*html部*/
<div class="thumbnail">
<img src="aaaa1.png" alt="sample1" title="sample1">
<img src="aaaa2.png" alt="sample2" title="sample2">
<img src="aaaa3.png" alt="sample3" title="sample3">
</div>>

この回答への補足

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

この方法ですと、画像サイズがimgを囲む要素に対する%比率のサイズになってしまいます。
たとえばbodyタグ内に直に画像を配置すると、
IE以外ではheightの%はおそらく無視されるので、width:50%;だけが有効になって、
すべての画像が、画面幅の50%の幅を持つイメージになってしまいます。

一般的にはサムネイルはこのやり方でいいんですが、
今回の場合は、小さいものは小さく、大きいものは大きく表示したいのです。

補足日時：2011/08/25 19:06

No.2 回答者： ORUKA1951 回答日時： 2011/08/25 18:57

　もちろん方法はあります。

ほとんどのサーバーにインストールされているimagemagick( http://ja.wikipedia.org/wiki/ImageMagick )を使ってサーバー側で処理させます。本当に簡単に画像の加工が出来ます。

　それはさておき、サムネイルを使う大きな目的はデータ量を少なくすることです。回線速度が遅いユーザーにとって、大量な画像データの転送は大きなストレスになります。そのため、単に表示サイズを小さくするためにHTMLないしスタイルシートで縮小するのは意味がありません。

　そのため、あくまで画像は実際に縮小するほうが良いでしょう。そのために、画像を開かずに縮小するフリーソフト、有料ソフトがたくさんあります。（もちろんimageMagickでも可能です。）
　

この回答への補足

あぁ、すいません。条件がもれていました。CGIの類は使用できないのです。

しかし、めんどくさがらずにサムネイルを設ければいいんですよねぇ。
それは分かっているのです。
また、製品画像といっても図面みたいなものなので、
サイズは無視できるようなサイズなのです。

表示された製品の点数によって、サムネイルのサイズを変えたりとか、
画面によってサムネイルのサイズを変えたりとか、
余計なことを考えたので（たぶん変なのでやらないと思いますが）
もしそういうことをしたいとなったら、どうやって実現すればいいのだろうと、
余計なことで悩み始めてしまったのです。

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

補足日時：2011/08/25 19:21

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2011/08/25 19:39

No.2です。

なら、簡単に
縮小専用。の詳細情報 : Vector ソフトを探す！ ( http://www.vector.co.jp/soft/win95/art/se153674. … )
などで、バッチ処理しましょう。
必要なら、画像の種類によってフォルダーを作ってそのフォルダーの中身を処理すれば良いです。

　将来的にはImageMagickですね。ブログや画像投稿サイトやYahooオークションなどでも使われていますが、投稿された画像を縦横いずれかを枠内に収まるように、あるいは画像サイズのみ縮小したり、文字を重ねたり、枠をつけたり回転させたり、フォーマットを変換したり・・本当に色々出来ます。機能的にはPhotoShopと遜色ないでしょう。Windows版もあるのでローカルのパソコンに入れておいても便利です。