HTML5 ならCSSだけでサイズ補正したサムネイル表示が 出来ないかと思って調べて見たのだができないっぽい。

JavaScript を使えば出来るは明白なのだが サムネイルがリストだったりすると結構めんどくさいので 何とかCSSだけでごまかす方法を考えてみた。

imgタグは縦横比を変えないで縮小するには幅か長さの どちらかしか指定できない。 両方指定すると変形してしまう。

なので縦幅のみをサムネイルに合わせて横がはみ出た場合は overflow: hidden; で隠して中心部分を表示するようにしてみた。 (縦横は逆も可)

=>
=>

いい感じだ。
よっぽど要件が厳しくないかぎり許容範囲ではないだろうか。
ちなみに毎度の事ながら IE7 では動かない。

ソース：

<style> span.Thumbnail{ width:72px; height:72px; border: 1px solid black; display: inline-block; overflow: hidden; background-color: black; } span.Thumbnail > div{ width:216px; height:216px; margin-top: -72px; margin-left: -72px; display: block; } span.Thumbnail > div > div{ width:216px; height:216px; display: table-cell; text-align: center; vertical-align: middle; } span.Thumbnail img{ /*width: 72px;*/ height: 72px; display: block; margin: auto auto; } </style> <table> <tr> <td align=center> <img border=1 height="200" src="/old/img/auone/LOVELOG_IMG/TS3M0018.JPG"/> </td> <td>=></td> <td> <span class="Thumbnail"> <div><div><img src="/old/img/auone/LOVELOG_IMG/TS3M0018.JPG" /></div></div> </span> </td> </tr> <tr> <td> <img border=1 width="200" src="/old/img/auone/LOVELOG_IMG/100328_kebabu-1.JPG"/> </td> <td>=></td> <td> <span class="Thumbnail"> <div><div><img src="/old/img/auone/LOVELOG_IMG/100328_kebabu-1.JPG" /></div></div> </span> </td> </tr> </table>