「width 属性と height 属性の話」のエントリーを書いたあとに見つけた「CSS Scale Image Html Tutorial」はなかなか興味深かった。
一般的なブラウザでは、表示メニューから文字サイズを大きくしたり、小さくできたりする（ IE はフォントサイズを px 指定してあると変更不可だけど）。もっと先進的なのは、Opera のズーム機能で、こちらは文字のみならず画像も拡大・縮小できるわけだけど、CSS の em で画像のサイズを指定することで、Firefox や IE などでも文字のみならず画像も拡大・縮小できるぜって話。
- サンプル
サンプルを作ってみたんで、見てもらえば分かると思う。同じ画像に対して、上は img 要素の width、height 属性でサイズを指定しており、下は CSS にて、単位 em を使って指定している。ブラウザの表示メニューから文字サイズを変更すると、下の画像もサイズが変化する。
問題は、当たり前な話なんだけど、デフォルトのフォントサイズを変更出来るブラウザでフォントサイズを変更していると、最初から画像サイズが変更された状態になってしまうって事と、親要素の状態によっては画像サイズの単位を em に変換するのが面倒ってことか。
Comments
こ、これは使えますね！
装飾画像やロゴなどに部分的に投入すると効果ありそうですね。
>装飾画像やロゴなどに部分的に投入すると効果ありそうですね。
そうそう、使いどころって言ったら仰るとおりそこらへんでしょうね。
Mac の Safari でも動きました。すばらしいです。
いままで試そうと思わなかったのが不思議です(^^;
ooba さん、報告ありがとうございます。
そういや、マックで確認していなかった;-P