サムネイル画像 ― 2011/02/18 17:25
このブログに貼る画像は減色したPNGを好んで使ってるのですけれど、困ったことに300dotを越えるとフルカラーPNGのサムネイルが作られて、それが元の画像の倍以上(8KBの元絵が20KBのサムネイルに化ける)のファイルサイズなるのでサムネイルの価値がなかったりします。
しょうがないから自分でサムネイルを作って、手打ちでサムネイルを入れ替えてたり、幅に余裕があれば直に表示するよう書き換えていたのですがいい加減面倒だったので、なにか良い方法はないかと探してみたらこんなのがありました。
CSSだけで画像のリサイズを処理する(IE6に対応させて、しかもハイクオリティ)完全版 - くらげだらけ(くだくらげのBLOG)
<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" />
これはいいと、↓なコードでテストしてみたら上手くいったので、アサブロのCSSを更新してみると何故かIE6でサイズが調整されない。orz
.msg-pict img{max-width:600px;-ms-interpolation-mode:bicubic}
* html body .msg-pict img{width:expression(this.width >= this.height ? "600px" : "auto")}
(BlackJumboDogを使って)ローカルでテストしたときはIE6も大丈夫だったのですが何が悪いのか……ローカルのCSSは去年の4月に作り替えようとして途中で投げ出したものでアサブロのCSSと少々違ってるのが原因なのか、カスタマイズしたアサブロのCSSにどこか間違いがあるのかまだよく分かりません。
IE6が消えてくれたら円満解決なんですがw
しょうがないのでいまのところは、横幅が600以上のimgにwidth="600"を付けてheightを指定せずに逃げてます。
ところで
img {
-ms-interpolation-mode: bicubic;
}
これはIE7からのようでIE6では全く効果がなかったようなのですが、ひょっとして他におまじないが必要なのかなぁ。
と今日は体調が悪いのでストックしておいたネタで逃げる。_ノ乙(、ン、)
(本当は解決してから投入するつもりだったん)
最近のコメント