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

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;
  }
}

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

この画像の中央配置方法については「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ではどうにもできなさそうです。