CSSフレームワークを使おう

■第９話：画像を枠内に収めよう（object-fit）

（最終更新日：2022.06.13）

画像を枠内に収めたい！

サイズの異なる画像を幾つか並べた時に、大きさを揃えて表示したいという場面は多々ある。 今回はそんな要望に答えるCSSの機能について説明する。

１.画像を枠内に収めるCSS（object-fit）

画像を枠内に収めるCSSプロパティに、object-fitというものがある。 枠内に収める対象としては、「img」「video」「iframe」要素になる。主に使用するのは「img」だろう。 設定値としては、contain、cover、fill、none、scale-downの５種類である。各々順に説明する。

デフォルトの画像
最初にobject-fitのプロパティを指定しなかった場合の２種類の画像を示す。 最初の画像は400×267px、次の画像は400×599pxである。これらの画像を250×250pxに収めていく。

contain
縦・横の比率を保持したまま、要素のサイズに収まるように縮小して表示する。 要素のサイズと画像のサイズが合わない場合は、空白（灰色部分）になる。

cover
縦・横の比率を保持したまま、要素のサイズに収まるように縮小して表示する。 要素のサイズと画像のサイズが合わない場合、短い方を枠いっぱいに合わせてはみ出した部分は切り取る。

fill
縦・横の比率を変えて、要素のサイズに収まるように縮小して表示する。 要素のサイズと画像のサイズが合わない場合、潰れたような表示になる。

none
縦・横のサイズを変えずに、要素のサイズに収まるように縮小して表示する。 デフォルトでは中央部のトリミングになる。

scale-down
画像が要素よりも小さい場合はnone、そうでない場合はcontainが適用される。この場合はcontainが適用されている。 いずれにおいても空白部分が作られる。

２.まとめ

画像サイズの違う２つの写真をきれいに並べようとした場合、object-fitのようなCSSプロパティは非常に有効である。 今回のプロパティだと、画像自体の比率を変えずに切り抜いた「cover」か「none」が実用的な使い方だと考えられる。 画像の収め方に困った際は、ぜひこのobject-fitを活用してみよう。

▼参考図書、サイト

  【CSS】object-fitの使い方【img要素の縦横比固定方法】　　nyanblog ~にゃんぶろぐ~
  object-fit　　mdn web docs