異なる大きさの各画像を比率を保ったまま枠いっぱいかつ中央に表示させるCSS

なんのこっちゃ…というタイトルですが、CSSコーディングしていて悩んでいたことがある日あっさり解決したので、備忘録も兼ねて書き残しておきます。

要するに、決まった大きさの枠の中に、大きさがランダムな画像を縦横比率を維持したまま枠いっぱいに空白なく綺麗に収まるように表示させたかったのです。
これが実現できれば、統一感のあるギャラリー的なレイアウトが可能となります。

Web検索してもなかなか見つからないなーと思っていたら、とても便利なCSSプロパティを見つけました。とても簡単です。

実際にコーディングしてみる

まずHTMLから。

<div class="inner">
    <img src="main.jpg">
</div>

imgタグのmain.jpgが、大きさも比率もわからない画像です。
imgタグをinnerクラスで囲みます。

そして肝心なCSSが以下の通りです。

.inner {
    display: inline-block; /*インライン*/
}
.inner img {
    width: 150px; /*固定枠の大きさを指定*/
    height: 150px;
    object-fit: cover; /*これが重要！*/
}

これで最初のイメージ図のように画像が表示されるはずです。
以下にて実際のプレビューをご覧下さい。

See the Pen OYvWxy by Maesuke (@maesukeshana) on CodePen.

解説

イメージタグそのものに「object-fit」というプロパティを使用します。
これは親要素のコンテナーにこれを記述した要素をどのようにはめ込むかを指定することができます。

例えば初期設定の「object-fit: fill;」だと、親要素の枠に画像を伸ばしたり潰したりしてでもぴったり収まるよう設定されます。

今回ご紹介の「object-fit: cover;」は、画像の中央を、親要素のボックスサイズに合わせて良い感じにトリミングしてくれるのです。
なお、object-fitで使える値は以下の通りです。

ただしobject-fitプロパティはIE11以下のブラウザーには対応していないのでご注意を。
Microsoft Edgeは対応しています。

まとめ

といった感じで、CSSプロパティを知るまでは検索キーワードをいくら工夫しても出てこず、解決するまで意外と時間が掛かりました･･･
私と同じようなことをしたくて悩んでいる方のために、ブログタイトルも検索しやすく決めた次第です。
しかしこのプロパティ、レスポンシブデザインとも相性がよさそうですね。今後も使っていくと思います。

参考になれば幸いです。