画像単体表示時に各ブラウザが適用するスタイル

Category : CSS

ブラウザで画像ファイルを単体で開いたとき、ブラウザによって表示の仕方が違っていたのが気になったので、画像表示ページの CSS を調べてみました。
なかなか面白かったですし、何かの参考になるかもしれません。

Google Chrome & Safari

Chrome 20.0.1115.1 dev-m と Safari 5.1.5 で調査。

  • 画像は表示領域の左上にぴったりと表示される。
  • 画像が表示領域内に収まりきらない場合は縮小して全体表示。

スタイルは各要素に style 属性で直接指定されます。

body {
  margin: 0px;
}

img {
  -webkit-user-select: none;
  cursor             : -webkit-zoom-in; /* 縮小表示時 */
}

Firefox

Firefox 12.0 と Aurora 14.0a2 (2012-05-01) で調査。

  • 表示領域は暗い感じに塗りつぶされ、画像は表示領域の中央に配置される。
  • 背景は Firefox 12 では単色だが、Aurora 14.0a2 では画像が使われている。
  • 画像が表示領域内に収まりきらない場合は縮小して全体表示。

また、head 要素内に

<meta name="viewport" content="width=device-width; height=device-height;">

が指定されています。

スタイルは resource://gre/res/TopLevelImageDocument.css に記述されていますが、必要に応じて画像に style 属性で cursor:-moz-zoom-in, cursor:-moz-zoom-out が直接指定されます。

/* Firefox 12 */
@media not print {
  body {
    background-color: #222;
    margin          : 0;
  }

  img {
    color     : #eee;
    text-align: center;
    position  : absolute;
    margin    : auto;
    top       : 0;
    right     : 0;
    bottom    : 0;
    left      : 0;
  }
}

/* Aurora 14.0a2 (2012-05-01) */
@media not print {

  /* background-color プロパティが削除されている */
  body {
    margin: 0;
  }

  /* color プロパティが削除されている */
  img {
    text-align: center;
    position  : absolute;
    margin    : auto;
    top       : 0;
    right     : 0;
    bottom    : 0;
    left      : 0;
  }
}

/* ここは同じ */
@media print {
  img {
    display: block;
  }
}

Aurora 14.0a2 (2012-05-01) ではもう1つ CSS が読み込まれています。
これは chrome://global/skin/TopLevelImageDocument.css です。
スキンでカスタムできるようにするための変更なんでしょうかね。

@media not print {
  body {
    background: #222 url(data:image/png;base64,...);
  }

  img {
    color: #eee;
  }
}

この DataURI 画像ですが、背景色をあわせるとこんな感じの 88×88 の PNG 画像です。ノイズっぽいあれですね。
めっちゃ拡大すれば見えると思いますw

この画像の中央配置方法については Firefox で使われている上下左右中央配置のスタイルシート という記事を書きましたので、よろしければどうぞ。

Opera

Opera 11.62 と Opera Next 12.00 beta で調査。
中身はたぶんどっちも一緒。

  • 画像は表示領域のエッジから若干の余白を取った上で中央配置。
  • 画像が表示領域内に収まりきらない場合は縮小して全体表示。

基本となる CSS ファイルと style 要素でスタイル指定をしています。
CSS ファイルは opera:style/image.css にあります。

style 要素ですが、media 属性に (max-width:画像本来の幅[px]),(max-height:画像本来の高さ[px]) が指定されます。

まずは基本の CSS ファイルの中身から。

html {
  background-color: hsl(0, 0%, 98%);
  display         : table;
  width           : 100%;
  height          : 100%;
}

img {
  display: block;
  margin : auto;
}

body {
  margin        : 0;
  padding       : 8px;
  display       : table-cell;
  vertical-align: middle;
}

@media projection, tv, handheld {
  html {
    background-color: black;
  }

  body {
    background-color: hsl(0, 0%, 39%);
  }

  img {
    background-color: hsl(0, 0%, 98%);
  }
}

次に style 要素内の指定。多分画像の大きさで変更とかはないと思います。

body.contain {
  position: absolute;
  margin  : 0;
  top     : 0;
  left    : 0;
  bottom  : 0;
  right   : 0;
}

body.contain > img {
  width        : 100%;
  height       : 100%;
  -o-object-fit: contain;
  cursor       : zoom-in;
}

body.zoom > img {
  cursor: zoom-out;
}

背景は完全な白ではないんですねー。というかまさかの HSL 指定。
デバイスによって背景色を変えているのが特徴的です。

画像の中央配置ですが、body を表示領域全てを覆うようにして、その上で display:table-cell;vertical-align:middle; で垂直方向のセンタリングを、img 要素に display:block;margin:auto; で水平方向へのセンタリングを行っているようです。

body 要素の contain クラス名は、画像が全表示状態のときに使われます。小さい画像や縮小表示時ですね。
また、object-fit プロパティを使って画像の表示上の大きさを調整しています。
このプロパティの仕様は CSS Image Values and Replaced Content Module Level 3 – 5.5. Sizing Objects: the ‘object-fit’ property にあります。

Internet Explorer

Internet Explorer 9.0 で調査。

  • 画像は表示領域のエッジから余白を取った上で、左上にフィットするように配置。
  • 画像が表示領域内に収まらない場合は縮小表示。

特にスタイルは指定されていませんでした。
ただし画像が収まりきらないときは他のブラウザと同じように縮小表示され、カーソルもズームイン・ズームアウト用のものが表示されます。
ですがブラウザの調査ツールではどこで指定されているのか分かりませんでした……。
残念ながら CSS とか JS ではどうにもできなさそうです。

Leave a Reply