Light TALK Plus＋ vol.29「object-fitプロパティ」
「Light TALK Plus＋」とは…
アルバイトが気になった今ホットなWEBニュースやティップスをお届けするコーナーです。
今回のテーマは「object-fitプロパティ」です！
object-fitプロパティ
画像をサイトに入れ込む場合、サイズが合わない場合があります。
その場合、Photoshopを用いてサイズを合わせる必要があるのですがobject-fitプロパティを使うことでCSSだけで画像をトリミングすることができます。
サンプル画像
今回は縦横比3:2の画像を使います。
object-fitプロパティ
object-fitプロパティの値は「fill」「contain」「cover」「none」「scale-down」の5種類あります。
今回は縦横比3:2の画像を縦横比1:1にしてそれぞれの値の効果を見ていきたいと思います。
※画像を囲っているボックスの背景色をピンクにしています。
「fill」
「fill」は初期値になります。トリミングは行われず、縦横が指定されているボックスのサイズに合わせた形で表示されます。
縦横比が異なる画像を設定した場合、引き延ばされた画像になってしまいます。
「contain」
トリミングは行われず、縦横比を維持したまま画像が囲っているボックスに応じて拡大・縮小表示されます。
「cover」
ボックスサイズに合わせて画像が拡大・縮小され、ボックスサイズに合わせてトリミングされるため、余白ができません。
「none」
画像は拡大・縮小されず、トリミングのみされます。
「scale-down」
ボックスより画像が大きい場合はcontain、小さい場合はnoneが適応されます。
object-positionプロパティ
object-fitプロパティでトリミングされた画像は位置をしていすることができます。
画像の位置を指定する場合にはobject-positionプロパティを用いて指定します。
サンプル画像
100px✕100pxの正方形を9つ並べた300px✕300pxの画像を使用します。
画像を100px✕100pxのボックスに囲い、トリミングした画像をもとにobject-positionプロパティを見ていきます。
object-positionプロパティを指定していない場合
object-positionプロパティを指定していない場合、画像は中央に位置取りされます。
以下の画像はobject-positionに値を入れた画像を表示させています。
top
bottom
left
right
top left
top right
bottom left
bottom right
object-fitプロパティはPhotoshopなどで画像をトリミングしなくてもcssのみでトリミングできる機能です。
場合によってはPhotoshopよりも簡単な作業なので覚えておくと便利です。
Light Webからのお知らせ
ライトウェブはプライバシーマークを取得しました！
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します！
