どんなサイズの画像が来るかわからないけど、固定エリアに上下中央に表示したい、そんな時のCSSの指定方法です。

やりたいこと

• 画像を固定エリアに上下中央で表示する
• 固定エリアよりも大きいサイズの画像の場合、はみ出さずに表示する
• 画像の比率は保持する

解決方法

固定エリアのサイズを縦：200px 横：500px の場合。

html

<div class="outer_area">
<img src="hoge" class="inner_image" />
</div>

css

.outer_area {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 200px;
}
.inner_image {
width: auto;
height : auto;
max-width: 500px;
max-height: 200px;
}

ポイントは２つ。
「上下中央配置」と「固定エリアからはみ出さない」指定です。

「上下中央配置」はflexboxを使用します。
display: flex;
justify-content: center;
align-items: center;

「固定エリアからはみださない」ために、maxプロパティを指定します。
max-width: 500px;
max-height: 200px;

そして、デフォルトの画像サイズ指定として、widthとheightにautoを指定しておきます。
これで画像比率を保ったまま、固定エリアからはみ出すことなく画像を表示出来ます。

どんな時に使うのか

通常、画像は制作時に用意することがほとんどですが、CMSだと投稿者が用意することになります。
誰でも更新出来るようにCMSを導入するので、画像の比率を気にしてくれないこともよくあります。
そんなときにどんな画像が来てもレイアウトが崩れないようにCSSで調整してあげられるようにしておく必要があります。

上下中央配置について

今回は上下中央配置にflexboxを使用しましたが、他にも様々な指定方法があります。
一番モダンな方法としてはgridを用いる方法です。IE11での対応が必要な場合はCSS Gridは使用出来ないので注意です。