CSSだけで画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ）完全版

よくあるCSSの使い方ですが、画像をサムネイル表示するときにJSとかPHPとか書くのがウザイのでCSSでやるパターンのやつのメモです。

要は、CSSで画像のWidthとHeightを制御してやるわけですが、
今回はデカイ画像をサムネイル表示させるので、max-widthとmax-heightで制御してやります。

こんな感じ

<style type="text/css">
.image-resize {
	max-width: 200px;
	max-height: 200px;
}
</style>

<img src="images/test-image.jpg" class="image-resize" />

これで、200pxより大きければ、200pxにしてくれる。もちろん比率はそのまま。
しかし、IE6ではmax-widthとmax-heightに対応していないので、だいぶ前に書いたエントリーの「IE6でmin-Widthやmax-heightを適応させる」を使います。

こんな感じ

<style type="text/css">
.image-resize {
	max-width: 200px;
	max-height: 200px;
}
* html body .image-resize {
	width: expression(this.width >= this.height ? "200px" : "auto");
	height: expression(this.width <= this.height ? "200px" : "auto");
}
</style>

<img src="images/test-image.jpg" class="image-resize" />

これで、IE6でも自動縮小表示してくれる。

あとはハイクオリティ縮小ですが、
IEとかだと縮小表示させたときに、画像が汚くなることが多々あります。
それを解消するにはCSSに以下のスタイルを追加します。

img {
	-ms-interpolation-mode: bicubic;
}

これで、CSSだけで画像のリサイズを処理する（IE6に対応させて、しかもハイクオリティ）の完成。
一応、サンプルページ。

違う話だけど、早いとこHTML5とCSS3の仕様を読みたいなぁ。英語であったっけなぁ…。

※追記：これで上手くいくと思ってたけれど、IE6で見たときに縦長画像が上手くいかないらしい。わからん…orz。
※追記2：expressionの部分はjavascriptなのでココを上手く書けばいいと思うんだけどなぁ。がっちり書いたら結局それってjavascriptじゃんってなりかねないので、いい方法を探したい。
※追記3：上手くいきました。document.body.clientWidthをthis.widthにすると上手くいきました。上のコードも変更してあります。
※追記４：「this.width > this.height this.width < this.height」←これだと縦横同じ長さの場合に両方とも「auto」になってしまうので、「this.width >= this.height this.width <= this.height」に変更しました。
※追記５：IE8で少しおかしな動作をすることが分かりました。詳しくは「CSS画像リサイズを使用する際のIE8のバグ修正について」で