Jintrick.netagenda2008年07月アーカイブ → 2008年07月26日

FirefoxでOperaのような画像縮小表示?

img要素で埋め込まれた画像は、width: 100%を指定するとコンテナボックスの幅一杯に表示される。このときウィンドウ幅を狭めると、その幅に合わせて幅が変化してくれるため、横スクロールバーを出さずに済む。しかし一方で、その画像のnaturalサイズは無視されてブラウザ側で拡大/縮小が行なわれるために画質が不必要に劣化してしまう結果にもなる。このため、img {width:100%}が指定されることはあまりなかった、と思う。

しかし本来は、画像の元の大きさを超えぬよう「縮小」のみを行なって横スクロールバーに対処して欲しいところだと思う。ウィンドウの幅を広げた時に不必要に画像が拡大されてしまうと、かえって視認性が悪くなる結果になりかねないからだ。汚らしいしね。

これを自動でやってくれるのがOpera。バージョンいくつからかは知らないが、全くもって素晴らしい。

Opera9の自動画像縮小
横スクロールバーが出ないよう画像を縮小する 横スクロールバーが出ないなら画像本来の大きさが保たれる

FirefoxでもJavascriptに頼らず、CSSのみでできたらいいなと思っていたのだが、先日ふとしたことで実現できてしまったのでメモしておく。Firefox3からなのかな。何故そうなるのかは仕様書を読んでもわからんし、バグなのかも知れん。そして何をいまさらなのかもしれない。

具体的には、当該img要素の親コンテナ要素のdisplayプロパティが、table, table-cell, table-row, table-header-group, inline-table, inline-block、のいずれかであったとき、width: 100%を指定された画像は、その画像本来の大きさ(naturalサイズ)を限界として、大きさが可変になる。当然縦横比は保ったまま。

Operaでも試したかったけれど、元々の縮小表示を無効にする設定がさっぱりわからん。昔のOperaは確か有効無効の切り替えがあったような気がするのだが……。

追記

javascripter氏のコメントを読んで、もう一度仕様書をあたってみたけれど、やっぱりわからん。視覚整形モデル、widthプロパティ、displayプロパティ、置換インライン要素、表関連を読んだ。ただしCSS2.1だけど。multicolだけは追っかけてるけど、CSS3は草案なので読んでない。全読しないと確信はもてないが、その時間が作れない。


webmaster@jintrick.net
公開: 2008年07月26日
カテゴリ: CSS ,Firefox