CSSで、ブラウザの文字のサイズにあわせて画像を拡大・縮小する。

ブラウザの文字のサイズを大きくすると大きくなり、小さくすると小さくなる画像。

あったのですね。その方法が･･･



しかも、かなり昔から･･･

なさけないやら、はずかしいやら
(´_ゝ｀)


FireworksとDreamweaverを使っているのですが、両方とも画像サイズをpx単位で指定するため、何の疑いもなくpx単位を使っていました。



で、どうするかというと、

imgタグの中で、画像サイズ（width、height）をpx単位で指定するのではなく、
CSSの中で、画像サイズ（width、height）をem単位で指定すればよいとのです。

たとえば、幅が300px、高さが100pxの画像の場合は、

＜CSS＞
img.image01 {
    font-size    :medium;
     width        :18.75em;
     height       : 6.25em;
}

＜HTML＞
<img src="image01.gif" class="image01" />

となります。



サンプルを作りましたので、ブラウザの文字のサイズを変更してみてください。
http://tools.on.coocan.jp/sample/image_resize/index.html



で、自分の本家サイトを全てCSSでem単位指定で作り直したのですが、

ブラウザの文字サイズを小さくしている人は、小さい画面が好きなのではなく、少ないエリアにたくさんの情報を表示させたいのだと思います。
なら、文字や画像は小さくしても、ページの幅は小さくしないほうがよいと思います。

ということを、作り終えてから気づきました。



また、作り直し･･･
ヽ(；´Д｀)ﾉ