画像を要素の中央に配置するCSS

CSS Web

異なる大きさの各画像を比率を保ったまま枠いっぱいかつ中央に表示させる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: fill; (規定値)親要素のサイズ通りに引き延ばしてでもピッタリ納める。
object-fit: contain;比率を保ったまま親要素サイズに画像全体をピッタリ収める。
ただし空白ができる。
object-fit: cover;比率を保ち、かつ親要素サイズに余白無くピッタリ収める。
画像中央からはみ出た部分は非表示となる。
object-fit: scale-down;none;とcontain;のうち、小さくなる方を選択して表示します。
object-fit: none;拡大・縮小は一切行われず、親要素からはみ出た領域は非表示となる。画像中央を表示する。

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

まとめ

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

参考になれば幸いです。

この記事は役に立ちましたか?

  • この記事を書いた人

Maesuke

2年目Webデザイナー。 IT全般やWeb関係、ガジェット、暗号資産(仮想通貨)などに興味を持ち、気になった情報などを日々つぶやき続ける普通の人。

イチ押し記事!

1

いくつかの副業を試してきましたが、プログラミングのようにガッツリ勉強する必要もなく、さらに数日で数千円、1ヶ月で3〜5万円くらいを稼げるコスパの良い「動画編集」という副業を、今回は紹介しちゃおうかなと ...

-CSS, Web
-, , , ,

© 2020 maesuke.comブログ