emユニットで画像のサイズを指定する

画像のサイズは普通固定ですが、CSSのemユニットを使ってサイズを指定する事により現在の文字サイズに合わせて画像を表示する事ができます。とはいえビットマップグラフィックの場合画像がゆがみますし、色の指定は結局できないので利用価値は低いかもしれません。

ソース

img.letter
{
    height:1em;
    width:1em;
}

<p>らぶらぶ<img src="heart.png" alt="（はーと）"  ></p>
<p>ラブラブ<img src="heart.png" alt="（ハート）"   class="letter"></p>

ハートマークを「文字」として表示している、という事でクラス名に"letter"、altテキストに「ハート」としてあります。が、altテキストの内容として何が適切なのかというのはなかなか難しいです。この場合は空のaltテキストでもいいような気はします。

CSSに対応しているブラウザであれば、適当にフォントサイズを変えてもらえば違いが分かるかと思います。imgで張り付けられるベクタグラフィックがあればかなり便利のような気がします。