画像をブロックの中央に表示する

HTML ページ内で、画像をブロックのサイズにリサイズしつつ、中央に表示する方法です。
PHP 等、動的にページを作成する場合には、width や height を動的に設定すればよいですが、静的に設定しなくてはいけないことも多々あります。
主に、http://www.xenophy.com/webdesign/2775 の情報を元にしています。


HTML のコンテンツとしては、以下のような構成となります。

 <div>
  <p>
    <img src="/image/xxx1.jpg" />
  </p>
 </div>
 <div>
  <p>
    <img src="/image/xxx2.jpg" />
  </p>
 </div>

上記に対し、スタイルシートで以下のように指定します。
例：100x100 のブロックに表示

 div p {
  vertical-align: middle;
  width: 100px;
  height: 100px;
  display: table-cell;
  line-height: 0;
  text-align: center;
  layout-grid-line: 100px;
 }
 div p img {
  max-width: 100px;
  max-height: 100px;
  vertical-align: middle;
  width:  expression(this.width >= this.height ? "100px" : "auto");
  height: expression(this.width <= this.height ? "100px" : "auto");
  -ms-interpolation-mode: bicubic;
 }

layout-grid-line は IE の独自仕様で、これにより垂直表示を実現しています。


サンプル：画像を中央に表示する