Subscribed unsubscribe Subscribe Subscribe

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

CSS Web

よくある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にすると上手くいきました。上のコードも変更してあります。
※追記4:「this.width > this.height this.width < this.height」←これだと縦横同じ長さの場合に両方とも「auto」になってしまうので、「this.width >= this.height this.width <= this.height」に変更しました。
※追記5:IE8で少しおかしな動作をすることが分かりました。詳しくは「CSS画像リサイズを使用する際のIE8のバグ修正について」で