HTML&CSS

【CSS】簡単に画像をトリミング。object-fitの使い方(図解あり)

CSSのobject-fitの説明を見ても各種値の動作がしっくりきませんでした。

そのため、図解や実際にコードも記述してobject-fitについてまとめました。

object-fitとは?

object-fitプロパティは、置換する要素(img要素やvideo要素など)をその要素内にどのようにはめ込むかを設定するためのプロパティです。

例えば、画像をトリミングして表示するといったようなことが可能です。

でも「置換する要素」って言われてもピンとこないですよね。

僕は以下のように理解することで納得できました。




object-fitの構文と値

値の種類は以下があります。

  • fill(初期値)
  • contain
  • cover
  • none
  • scale-down

順番に見ていきます。

fill(初期値)



置換する要素のアスペクト比(縦横比)を無視して拡大、縮小して要素全体を埋めるようにはめ込む。

要素のアスペクト比と合わない場合は置換する要素が引きのばされる。

contain

置換する要素のアスペクト比(縦横比)を維持して拡大、縮小して要素全体を埋めるようにはめ込む。

要素のアスペクト比と合わない場合はレターボックス表示となる。

レターボックスとは画像の縦横比が合わない場合に、上下や左右に余白をつけたもの

cover

置換する要素のアスペクト比(縦横比)を維持して要素全体を埋めるように拡大、縮小される。

要素のアスペクト比と合わない場合は、置換する要素が要素に合うように切り取られる(トリミングされる)

none



置換する要素の拡大、縮小はせずに要素サイズに切り取られる(トリミングされる)。

scale-down

「contain」と「none」のうち置換する要素のサイズが小さくなるほうが適用される。




object-fitの使用イメージ

実際にobject-fitを使用したらどのようになるかをCodepenで書いてみました。

要素のサイズをpx指定している場合

See the Pen
object-fit size-fix
by Jyu2 (@Jyu2)
on CodePen.

要素のサイズを%指定している場合

See the Pen
object-fit responsive
by Jyu2 (@Jyu2)
on CodePen.

この中でもcoverはレスポンシブ対応時によく使用されます。




object-fitのまとめ

object-fitはIllustratorなどを使用せずに画像の切り取り(トリミング)が簡単に行えます。

そのため、画像のサイズを揃えて表示したい場合などに重宝しますね。

あとは色んな画像のサイズと要素のサイズを色々変更したりして、試してみてください。

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す