画像のサムネイルを縦横ともに指定した数値以内で表示したい。

質問

いままで画像を縦横比を維持して表示するには、縦一方の大きさを指定してたのですが
これだと横長の画像を多く並べる場合デザインが大きく狂ってしまいます…。（どんどん横に広がってしまいます）
googleやpixivのように縦横整えて表示させたいのですが、やり方が分かりません。どのようにすればよいのでしょうか。

イメージとしてはこんな感じです。
・130ピクセルx130ピクセルの枠の中に縦横比を維持した画像を表示させる。
・その枠を横に四つ並べる。

（縦長の画像は極端に縦長に表示され、横長の画像は極端に横長に表示されるということです。）

各画像の表示例は、例えばgoogle画像検索やpixivなど。
→google画像検索
http://images.google.co.jp/images?hl=ja&safe=off&q=%E3%83%91%E3%83%8E%E3%83%A9%E3%83%9E&lr=&um=1&ie=UTF-8&sa=N&tab=wi
→pixiv
http://www.pixiv.net/search.php?word=%E6%BC%AB%E7%94%BB&s_mode=s_tag

---いままで使ってたソース---
<table width="80%">
<tr align="center">
<td><a href="001.jpg"><img src="001.jpg" border="0" height="130"></a></td>
<td><a href="002.jpg"><img src="002.jpg" border="0" height="130"></a></td>
<td><a href="003.jpg"><img src="003.jpg" border="0" height="130"></a></td>
<td><a href="004.jpg"><img src="004.jpg" border="0" height="130"></a></td>
</tr>

<table width="80%">
<tr align="center">
<td><a href="005.jpg"><img src="005.jpg" border="0" height="130"></a></td>
<td><a href="006.jpg"><img src="006.jpg" border="0" height="130"></a></td>
<td><a href="007.jpg"><img src="007.jpg" border="0" height="130"></a></td>
<td><a href="008.jpg"><img src="008.jpg" border="0" height="130"></a></td>
</tr>
---ここまで---

こんなソースを使ってました。
教えてください、よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

大事なポイントを見過ごしてますよ。
googleの画像検索にしろ、ディスプレイの幅が小さくてもきちんと表示されているはずです。・・・ウィンドウを小さくして御覧なさい。
　HTMLは、そもそも
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［仕様書 HTML 4 邦訳)HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　また、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
前略・・こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
・・・【中略】・・・
* ページレイアウトの目的で表を用いる。
こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまでスタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )より

　以上の二点からも、
＞---いままで使ってたソース---
＞<table width="80%">
　には重大な問題があります。

　ここで比較的簡単な方法を説明しておきます。

HTMLソース(教えてgooの仕様の制約からタブを全角スペースに置き換えてある。)・・
　<ol id="ImageBox">
　　<li>タイトル
　　　<ul>
　　　　<li class="image">
　　　　　<a href="***" title="大きな画像へ" ><img width="128"></a>
　　　　</li>
　　　　<li>説明</li>
　　　</li>
　　　　<li class="image">
　　　　　<a href="***" title="大きな画像へ" ><img width="128"></a>
　　　　</li>
　　　　<li>説明</li>
　　　</li>
　　・・・【中略】・・・
　</ol>
　これで携帯端末でもリストとして表示されるはず、そのうえでスタイルシートで
ol#ImageBox{
　　width: 80%;margin-left:auto;margin-right:auto;border:1px;padding:0px;
}
ol.ImageBox li{
　　display:block;
　　width:130px;
　　float:left;
　　list-style-type:none;
　　marign:2px;
　　padding:0px;
}
とでもすれば(未検証)、ディスプレイの幅に合わせて並び替えられるはず。

　なお、画像はサーバーでimageMagick等が使えれば、それを使ってサムネイルを自動作成するようにしておけば、負担は軽減される。

お礼

ご回答ありがとうございます。
リストタグで画像を表示させてみたのですが
リストマークが表示されてしまいました。これは消せないのでしょうか？
またcssが適用されないみたいでした。本来ならば画像が横に並ぶのですか？

あと画像のサムネイルについてなのですが
「サムネイルの大きさは縦横130pxまで」と決めておき
縦と横を比べて横が大きい場合は、横を130pxにして縦横比を維持して縮小。
縦が大きい場合は、縦を130pxにして縦横比を維持して縮小。
こうすることでgoogleやエクスプローラのサムネイルのように、一定の大きさのサムネイルなりますよね？
こんな風にすることは可能なのでしょうか。よろしくお願いします。

回答No.2

SortaNerd_

サムネイル用の画像を別に用意してください。PixivもGoogle画像検索もそうしています。
HTMLでサイズ指定するだけでは恐らく不可能です。またほとんどのブラウザで画像が汚くなるうえデータ転送量もかさみますのでお勧めしません。