【CSS】object-fitで画像の中央配置もトリミングも自由自在

Code

サムネイル画像やイメージスライダーなど、ボックスのサイズや縦横比が決まっていて、画像サイズを合わせたり、中央配置したりしたいときがありますよね。

そんなときに活躍するのが「object-fit」プロパティです。

背景画像でいうところの「background-size: contain / cover」の容量で、簡単に画像をリサイズ・トリミングできます。

これが出る前は「position: absolute」などを使って何とかしていたのですが、めっちゃスマートな方法になりました。

「object-fit」プロパティを使えば、画像の中央配置も簡単です。

object-fitのデモ

簡単なデモを作ってみました。

object-fitプロパティには、幾つかのキーワードが指定できます。

See the Pen object-fit: contain by Takayuki Kojima (@takayuki-kojima) on CodePen.

object-fitはサイズを指定しないと効かない

各値の説明をする前に、超重要な点を。

object-fitは、画像をコンテンツボックスにどうはめ込むかを指定するプロパティです。

よって、ボックスサイズを指定しないと効きません

<img>(もしくは<video>)のwidth / heightを必ず指定しましょう。

object-fitの値は5つ

object-fitの値となるキーワードは、5つあります。

img {
  object-fit: fill;
  object-fit: cover;
  object-fit: contain;
  object-fit: none;
  object-fit: scale-down;
}

object-fit: fill

画像はボックス全体を埋めるように拡大縮小されます。

画像とボックスのアスペクト比が一致しない場合は、引き伸ばされます。

ボックスサイズだけ指定したときのデフォルト状態とも言えます。

object-fit: cover

画像のアスペクト比を維持したまま、ボックス全体を埋めるように拡大縮小されます。

アスペクト比が合わない場合は、余った部分が切り取られます。

object-fit: contain

アスペクト比を維持したまま、画像全体がボックス内に収まるように拡大縮小されます。

object-fit: none

画像は拡大も縮小もされません。

後述するobject-positionと併せて使えば、画像のサイズを変えずに指定した部分を切り取って表示する、という使い方もできます。

object-fit: scale-down

画像がボックスより大きい場合はcontainを指定したときと同じように縮小されます。

画像がボックスより小さい場合はnoneと同じになり、拡大はされません。

object-positionで画像の配置を決める

object-fitプロパティを指定すると、デフォルトで画像が中央配置されます。

配置を変える場合には、object-positionプロパティで位置を指定します。

値は%値、数値、キーワード(center, right, left, top, bottom)です。

img {
  object-position: 50% 50%;/* デフォルト値。center centerと同じ */
  object-position: left top;/* 0 0と同じ */
  object-position: right bottom;/* 100% 100%と同じ */
  object-position: 40px 80px;
}

object-positionで画像をずらす

object-positionでは、ボックスに対して画像の位置をずらすことも可能です。

たとえば下記のように指定した場合、画像サイズはobject-fit: coverなのでボックスをぴったり埋めるサイズになります。

object-position: 40px -40pxなので、左から40px、上方向に40px、画像が動きます。

結果、左と下に空白ができ、右上にはみ出した部分は切り取られます。

img {
  object-fit: cover;
  object-position: 40px -40px;
}

object-fit: noneを使ってトリミング

下記のコードでは、object-fit: noneなので画像は元のサイズのまま、100px×100pxの枠に合わせて切り取られます。

デフォルトでは中央配置ですが、下記のようにobject-positionで上下左右に画像の位置をずらせるので、実質的に好きな部分をトリミングすることができるわけです。

img {
  width: 100px;
  height: 100px;
  object-fit: none;
  object-position: -20px -40px;
}

まとめ

object-fitを使えば画像のトリミングも中央配置もなんてことありませんね。

ボックスサイズに依存するプロパティなので、width/heightが必須ってとこだけ忘れないようにしましょう。

コメント

タイトルとURLをコピーしました