Light TALK Plus+ vol.29「object-fitプロパティ」

「Light TALK Plus+」とは…

アルバイトが気になった今ホットなWEBニュースやティップスをお届けするコーナーです。
今回のテーマは「object-fitプロパティ」です!

object-fitプロパティ

画像をサイトに入れ込む場合、サイズが合わない場合があります。
その場合、Photoshopを用いてサイズを合わせる必要があるのですがobject-fitプロパティを使うことでCSSだけで画像をトリミングすることができます。

サンプル画像

今回は縦横比3:2の画像を使います。

サンプル画像01

object-fitプロパティ

object-fitプロパティの値は「fill」「contain」「cover」「none」「scale-down」の5種類あります。
今回は縦横比3:2の画像を縦横比1:1にしてそれぞれの値の効果を見ていきたいと思います。
※画像を囲っているボックスの背景色をピンクにしています。

「fill」

サンプル画像01

「fill」は初期値になります。トリミングは行われず、縦横が指定されているボックスのサイズに合わせた形で表示されます。
縦横比が異なる画像を設定した場合、引き延ばされた画像になってしまいます。

「contain」

サンプル画像01

トリミングは行われず、縦横比を維持したまま画像が囲っているボックスに応じて拡大・縮小表示されます。

「cover」

サンプル画像01

ボックスサイズに合わせて画像が拡大・縮小され、ボックスサイズに合わせてトリミングされるため、余白ができません。

「none」

サンプル画像01

画像は拡大・縮小されず、トリミングのみされます。

「scale-down」

サンプル画像01

ボックスより画像が大きい場合はcontain、小さい場合はnoneが適応されます。

object-positionプロパティ

object-fitプロパティでトリミングされた画像は位置をしていすることができます。
画像の位置を指定する場合にはobject-positionプロパティを用いて指定します。

サンプル画像

100px✕100pxの正方形を9つ並べた300px✕300pxの画像を使用します。
画像を100px✕100pxのボックスに囲い、トリミングした画像をもとにobject-positionプロパティを見ていきます。

サンプル画像02

object-positionプロパティを指定していない場合

サンプル画像02

object-positionプロパティを指定していない場合、画像は中央に位置取りされます。
以下の画像はobject-positionに値を入れた画像を表示させています。

top

サンプル画像02

bottom

サンプル画像02

left

サンプル画像02

right

サンプル画像02

top left

サンプル画像02

top right

サンプル画像02

bottom left

サンプル画像02

bottom right

サンプル画像02

object-fitプロパティはPhotoshopなどで画像をトリミングしなくてもcssのみでトリミングできる機能です。
場合によってはPhotoshopよりも簡単な作業なので覚えておくと便利です。

Light Webからのお知らせ

ライトウェブはプライバシーマークを取得しました!
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します!