CSS＋αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法｜Media Technology Labs (MTL) : メディアテクノロジーラボ

CSS＋αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法

フナミタカオ

2008/4/2 23:23

フナミタカオです。
今回は、プチネタですが、左のキャプチャーのように、縦横比は同じだけど、縦向き、横向きの画像が混在するときに、正方形の枠のセンターに配置してならべるにはどうすればいいかという、チップスです。
たとえば、ホットペッパーWebサービスでも、画像のURLをサイズ別に５種類返していますが、正方形のものはなく、縦向きと横向きが混在しています。
縦横どちらがくるかは、画像のurlだけでは、わからないけれど、表示時に正方形枠に納まってくれれば、レイアウトもやりやすくなりますよね。

できれば、CSSだけでなんとかしたい

今回は、以下のような 100×75px　または　75×100px　の画像を例題として考えてみましょう。

　幅100px　高さ 75px
　幅75px　高さ 100px

この両者を、100×100pxの枠(DIV)に入れたいと思います。

いろんなやり方があるかもしれませんが、できるだけシンプルにCSSだけで済ませたいですよね。
順番に考えて見ましょう。

横方向のセンタリングは簡単

正方形の枠の中で、縦方向、横方向ともにセンタリングできればいいのだから、簡単にできそうです。
まず思いつくのがtext-alignを使った横方向のセンタリング。
実際これは、期待値どおりの効果が出ます。
縦向きの画像を、センターに表示するのは非常に簡単

<div style="width:100px;height:100px;text-align:center;border:1px solid #ccc;">
<img src="http://mtl.recruit.co.jp/blog/IMG_3389.jpg" />
</div>

↑これでOK.

<div style="width:100px;height:100px;text-align:center;border:1px solid #ccc;">
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" />
</div>

↑縦方向のセンタリングが必要。

縦方向のセンタリングは、ちょっと工夫が必要

横方向は簡単でしたが、縦方向はどうすればいいでしょうか？縦方向が、センタリングできそうなcssとしては、vertical-alignというのがあります。まさしくこれでうまくいきそうですよね。

<div style="width:100px;height:100px;text-align:center;border:1px solid #ccc;">
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" style="vertical-align:middle"/>
</div>

↑これだけじゃだめだ。
しかし、これでは、うまくいきません。
実はvertical-alignは、行の高さの中でそろえになるのですが、さきほどの場合だと、行の高さが75pxになるのですが、75ｐｘの中でセンタリングしても、効果は出ません。ためしに、幅を200にして、文字もいれてみます

<div style="width:200px;height:100px;text-align:center;border:1px solid #ccc;">
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" style="vertical-align:middle"/>
あ
</div>

あ

↑「あ」という文字は、高さ75pxの中でセンタリングされている。
なんとかして、高さを100にすれば、よさそうですね。
ためしに、高さ100pxの写真を一緒に並べてみると、なんと、高さ75pxの画像が縦方向にセンタリングされました。いい感じです。

<div style="width:250px;height:100px;text-align:center;border:1px solid #ccc;">
<img src="http://mtl.recruit.co.jp/blog/IMG_3389.jpg" style="vertical-align:middle"/>
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" style="vertical-align:middle"/>
あ
</div>

あ

縦方向のセンタリングを透明gifで実現

高さ100pxの写真があれば、行の高さも100pxにすることができました。
よって、100pxの高さを持つ透明gifを用意しておいて、その透明gifと一緒に、表示したい画像を並べればよさそうです。

<div style="width:250px;height:100px;text-align:center;border:1px solid #ccc;">
<img src="http://mtl.recruit.co.jp/blog/100.gif" style="vertical-align:middle"/>
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" style="vertical-align:middle"/>
</div>

↑これで、なんとか、縦方向のセンタリングができました。
そこで、幅を100pxに戻してみましょう。

<div style="width:100px;height:100px;text-align:center;border:1px solid #ccc;">
<img src="http://mtl.recruit.co.jp/blog/100.gif" style="vertical-align:middle"/>
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" style="vertical-align:middle"/>
</div>

↑おっと、画像あふれ！透明gifの幅があるので、その幅を無視できるようにしないといけません。
ここは、石橋研究員に「margin-left:-1にすればいいのでは」というアイデアをもらいました。
ためしてみると

<div style="width:100px;height:100px;text-align:center;border:1px solid #ccc;">
<img src="http://mtl.recruit.co.jp/blog/100.gif" style="vertical-align:middle"/>
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" style="vertical-align:middle"/>
</div>

できました！これで、いったん、OKなのですが、IEの場合、borderを引くと、ボーダーの罫線が内側に太って、その影響で、画像がはみ出す場合はあります。それを防ぐために、スタイルに*width:102px;を追加します。

<div style="width:100px;*width:102px;height:100px;text-align:center;border:1px solid #ccc;">
<img src="http://mtl.recruit.co.jp/blog/100.gif" style="vertical-align:middle"/>
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" style="vertical-align:middle"/>
</div>

これで、縦方向の場合のセンタリングもOKです。画像を挟み込まないといけないのが、ちょっと、格好わるいですが、縦横混在でも、これで、バランスよく画像が並べられるのではと思います。(横に、ならべたいのでfloat:leftをつけてみました）

クラスにしてすっきりとさせる

クラスにして、スタイルを分離します。

上記サンプルソースの、outer_box のプロパティを変更することで、枠スタイルや、背景画像等が変更可能になります。高さの違う、画像を表示するときには、透明gifを別途用意してもいいですが、今回のスタイル設定だと、line-heightクラスにheightとwidthをしてするだけもOKでした。

ココまで来れば、どんなサイズの正方形の大きさでも、スタイルの変更で対応できそうです。
CSSだけでは、解決できなかったのですが、CSS＋αということで、80点くらいは、もらえるかと思うのですがいかがでしょうか？
もっといい方法あったら、ぜひ教えてください。
それと、今まで、縦向きセンタリングでお困りの方、あきらめていた方、ぜひ、試してみてくださいね。

ほかの案

テーブルタグを使う

jinboさんから、コメントいただきました。テーブルタグでいいじゃんというご提案。

<table border=0 cellspacing=0 cellpadding=0 style="border:1px solid #ccc;">
<tr>
<td style="height:100px;width:100px;text-align:center;">
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg"/>
<td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=0 style="border:1px solid #ccc;">
<tr>
<td style="height:100px;width:100px;text-align:center;">
<img src="http://mtl.recruit.co.jp/blog/IMG_3389.jpg"/>
<td>
</tr>
</table>

たしかに、スクリプトで、自動生成するなら、これでも、ぜんぜんいいですね。tdは上下方向はデフォルトセンタリングなので、わかりやすいです。

line-heightをセットする方法

とおりすがりさんから、コメントいただきました。 line-height:100pxで、行間を固定すればいいのではというアイデアですが、画像だけではどうもうまくいかないようです。文字が、画像と同じ行にあれば、行間が100pxになってくれるのですが...

<div style="width:100px;height:100px;text-align:center;border:1px solid #ccc;line-height:100px;">
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" style="vertical-align:middle;margin-left:-1px"/>
</div>

以下幅を広げていますが、文字があれば、line-height:100px;の効果が出るようです。

あ

もし、line-height:でできるといいのですが...もし、書き方間違ってたら、ぜひ、教えてください。

Centering (horizontally and vertically) an image in a boxで紹介されている方法

http://www.brunildo.org/test/img_center.html
↑こちらで、紹介されている方法でも、実現できました。ちょっと、複雑ですが、画像を必要としないので、かなり、高得点かな。

margin-left:,margin-top:をマイナスにする方法

あるあるさんから、コメントいただきました。
CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』

こちらの、エントリーを参考に、以下のようなHTMLを作って試したのですが、どうも、画像がセンターに来ません。どなたか、添削お願いできませんでしょうか？
wakuで、外枠を書いてます。その外枠のDIV内で、wrapがセンタリングしてくれればいいのですが...

<html>
<head>
<style>
.waku {
position:relative;
border:1px solid #ccc;
width:100px;
height:100px;
}

.wrap {
position:absolute;
left:50%;
top:50%;

margin-left:-50px;
margin-top:-50px;
background:#fff;
color:#999;

}
</style>
</head>
<body>
<div class="waku">
<div class="wrap"><img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" alt="..."></div>
</div>
</body>
</html>

実行サンプルは↓

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』のエントリーの内容は、Bodyの中で、高さと幅のわかっているDIVをセンタリングする方法だから、ちょっと、通用しないのかなあ....もやもやしているのですが、わからずじまいです。

ほかにも方法ご存知でしたら、ぜひ教えてくださーい。
動作する、cssとHTMLもコメントいただけると助かります。