2008 . 03 . 05
how-to

画像のリサイズを可能にするCSSトリック

Webページ上の文字サイズを調整するのに「Ctrl +/-」はよく使いますが、リサイズされるのは文字だけで画像などはそのまま、当然レイアウトも崩れます。
しかし、画像も合わせてリサイズさせてしまう簡単なトリックがコレ。


HTML :
<img src="hoge.jpg" alt="hoge" class="expand" />
CSS :
img.expand { width: 10em; }

実にコレだけ・・。
実際に↑の虫眼鏡の画像で試してみましょう。

ユーザーの閲覧環境に合わせた柔軟なWebデザインが主流になる中、簡単で有意義なトリックではないでしょうか。

ただ、IEではダメなようです。この時点で一般化しないテクニックかもしれません。