個別記事

前後の記事

画像サイズを em で指定

この記事が属するカテゴリー
CSS

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

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

サンプル

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

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

2005-07-13T17:43:55+09:00 | コメント (4) | トラックバック (1) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/268

このリストは、次のエントリーを参照しています: 画像サイズを em で指定:

Beiteki Blog さんからのトラックバック
ブラウザの画像を拡大・縮小
歩行中に携帯端末で文章を読んでいるときに、歩行速度に合わせて文字が大きくなったら読みやすいだろう、という研究をしています。 ・・・前にも書いた？ ... [続きを読む]
2006年09月16日 16:58

コメント

酔兎 さんからのコメント

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

2005年07月14日 10:58
e-luck さんからのコメント [TypeKey Profile Page]

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

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

2005年07月14日 19:33
ooba さんからのコメント [TypeKey Profile Page]

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

2005年07月15日 03:25
e-luck さんからのコメント [TypeKey Profile Page]

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

2005年07月15日 12:31

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)