画像サイズを em で指定のサンプル

画像へのサイズ指定

上の画像は、img 要素の width 属性と height 属性で指定している。下の画像は、CSS にて、em 単位を使って指定している。ブラウザの表示メニューから文字サイズの変更をしてみると、違いが分かる。

<img src="banner.png" width="340" height="110" title="Lucky bag::blog" alt="" />

<img class="logo" src="banner.png" title="Lucky bag::blog" alt="" />

文字サイズを拡大・縮小すると、下の画像も一緒に拡大・縮小される。CSS での指定は下記の通り。基本的に、デフォルトフォントサイズは 16px と仮定している。

.logo {
        width: 21.25em;
        height: 6.9em;
}