画像サイズに依存しない絶対中央配置

ウェブページ作ってると画像を画面の中央に配置したいし、どんなサイズの画像が来ても真ん中にしたいし、どんなサイズの画面で見ても画像をはみ出させずに表示させたい欲求はよく出てくる。これってもはや人類の欲望と言っても過言ではない。

要件

  • 画像を縦方向にも横方向にも画面の中央に配置したい
  • 画像のサイズに依存したくない
  • ウィンドウサイズが画像サイズより小さくなっても画像がはみ出ない

この人類の欲望ををCSSで書くと、こう。

<body>
  <img src="image.jpg" />
</body>
img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

前のエントリで書いたスニペット(Firefoxで画像を直接見る時のUAスタイル)に、max-width: 100%;max-height: 100%;を加えただけ。デモで欲望を満たせる。

人類の欲望を満たしたデモ

対応ブラウザはIE8, Chrome 26, Firefox 20, Opera 12.14です。

IE8以上でも縦方向も中央配置するならdisplay: table;でいけるんじゃないかと思うところけど、3つめの要件「ウィンドウサイズが画像サイズより小さくなっても画像がはみ出ない」が完全には満たせない。タイトルで「画像サイズに依存しない絶対中央配置」なんて言っておいて、それ以上のことも要求する。人類の欲望は果てしないのだ。

html{
  display: table;
  width: 100%;
  height: 100%;
}

body{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

img{
  max-width: 100%;
  max-height: 100%;
}

人類の欲望を満たせないデモ

各ブラウザでアホかってくらいウィンドウサイズを小さくすると画像がはみ出てしまう(不思議なことに、Chrome 26だとdisplay: table;でも横方向の縮小表示がほんの少しだけ効く)。ウィンドウはそんなに小さくしないのが常識人だけど、画像がとても大きい場合は画像サイズ>画面サイズ になるシチュエーションもありえなくない、ということで。

ただし、親要素にabsolute: relative;を指定できないとか、子要素にimg以外に兄弟要素がある場合はこのスニペットは向かないので、あとはJSでがんばろう。