画像サイズを em で指定

width 属性と height 属性の話」のエントリーを書いたあとに見つけた「CSS Scale Image Html Tutorial」はなかなか興味深かった。

一般的なブラウザでは、表示メニューから文字サイズを大きくしたり、小さくできたりする( IE はフォントサイズを px 指定してあると変更不可だけど)。もっと先進的なのは、Opera のズーム機能で、こちらは文字のみならず画像も拡大・縮小できるわけだけど、CSS の em で画像のサイズを指定することで、Firefox や IE などでも文字のみならず画像も拡大・縮小できるぜって話。

サンプル

サンプルを作ってみたんで、見てもらえば分かると思う。同じ画像に対して、上は img 要素の width、height 属性でサイズを指定しており、下は CSS にて、単位 em を使って指定している。ブラウザの表示メニューから文字サイズを変更すると、下の画像もサイズが変化する。

問題は、当たり前な話なんだけど、デフォルトのフォントサイズを変更出来るブラウザでフォントサイズを変更していると、最初から画像サイズが変更された状態になってしまうって事と、親要素の状態によっては画像サイズの単位を em に変換するのが面倒ってことか。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/127

Beiteki Blog - ブラウザの画像を拡大・縮小 (2006年9月16日 16:58)

歩行中に携帯端末で文章を読んでいるときに、歩行速度に合わせて文字が大きくなったら読みやすいだろう、という研究をしています。 ・・・前にも書いた? ... 続きを読む

Comments

酔兎 said:

こ、これは使えますね!
装飾画像やロゴなどに部分的に投入すると効果ありそうですね。

e-luck said:

>装飾画像やロゴなどに部分的に投入すると効果ありそうですね。

そうそう、使いどころって言ったら仰るとおりそこらへんでしょうね。

ooba said:

Mac の Safari でも動きました。すばらしいです。
いままで試そうと思わなかったのが不思議です(^^;

e-luck said:

ooba さん、報告ありがとうございます。
そういや、マックで確認していなかった;-P