CSSで画像をトリミングできるobject-fitの使い方を徹底解説!

コーディングをしながら、レスポンシブの時に画像の縦横比が変わってしまう場合、調整に苦しんでいませんか?

実は、この記事で紹介する「CSSで画像をトリミングできるobject-fitの使い方を徹底解説!」を実践すると誰でも簡単に縦横比の調整ができ、画像のレスポンシブ対応ができるようになります。

この記事を読み終えると、CSSでの画像のトリミングを今後一切悩まずに実施することができます。

object-fitとは

 object-fitとは画像のトリミングやサイズ調整を行うことができるCSSのプロパティです。object-fitプロパティで使用できる値は以下の5種類です。

fill(初期値)

ボックスの中を完全に埋めるように画像の縦横比を調整しながら表示されます。

See the Pen MWYXapY by クリ★スタ (@cresta_design) on CodePen.

cover

 画像の縦横比を保持しながら、ボックスの中を完全に埋めるようにサイズ調整されます。盾と横の小さい方を基準にしてサイズが調整されるため、ボックスからはみ出した部分は、自動的にトリミングされます

See the Pen VwYdvWy by クリ★スタ (@cresta_design) on CodePen.

contain

 coverと同様で画像の縦横比を保ちます。ただしcontainは、縦と横の大きい方だけがボックスの大きさにフィットするように画像サイズが調整されます。

See the Pen WNbyQOB by クリ★スタ (@cresta_design) on CodePen.

 object-fit:contain;を使用すると、トリミングさせずに画像の周りに余白を作ることができます。この使い方も有効的なので覚えておくようにしましょう。

none

 画像サイズが調整されることなくそのまま表示します。

See the Pen vYErNJR by クリ★スタ (@cresta_design) on CodePen.

scale-down

 noneもしくはcontainを指定した場合の、要素が小さくなる方を適用して表示されます。

See the Pen MWYXaEw by クリ★スタ (@cresta_design) on CodePen.

以上が、object-fitプロパティで使用できる値になります。単純にトリミングをしたい場合は、imgのwidthやheightを指定してobject-fit:cover;を使用することが多いので覚えておくようにしましょう。

レスポンシブで使えるトリミング方法

 object-fitプロパティの優れた点として、画像のレスポンシブ対応を簡単に実施することができるという点になります。先ほど使用したobject-fit:cover;を使用してレスポンシブに対応できる画像の調整を覚えていきましょう。

See the Pen rNaKOKM by クリ★スタ (@cresta_design) on CodePen.

 上記のように、object-fit:cover;を100vwと100vhなどと使用することでどの画面幅でも同じ縦横比で同じように表示させることができます。

 ファーストビューの画像や、画面幅いっぱいに表示させたい場合にとても有効な使い方になります。

画像の切り取る位置を指定したい場合

 object-position;を使用すると画像を切り取る位置を指定することができます。実際に見ていきましょう。

画像の左側を使用したい場合

See the Pen NWPzGLQ by クリ★スタ (@cresta_design) on CodePen.

 左上を基準にobject-position:0 100%;と記述をして、左下と指定することもできます。

画像の右側を使用したい場合

See the Pen povKjxj by クリ★スタ (@cresta_design) on CodePen.

 左上を基準にobject-position:100% 100%;と記述をして、右下と指定することもできます。

まとめ

 この記事では、object-fitプロパティを使用したCSSでの画像のトリミング方法について説明をしていきました。object-fitプロパティの使い方を理解することで、縦横比の調整ができ、画像のレスポンシブ対応ができるようになります。レスポンシブコーディングに苦手意識を持つことなく自信を持って取り組んでいきましょう♩

 この記事がいいと思ってくださった方は、SNSでのシェアをお願いします![addthis tool="addthis_inline_share_toolbox_mqi1"]

質問をTwitterから募集します!

無料でwebデザインに関する質問にお答えします。

クリ★スタは未経験からwebデザイナーを目指す方を応援しています!そのため、学習していく中での些細な疑問に記事で回答していきます。

お気軽にご連絡ください。→クリ★スタ(@cresta_design)

Youtubeでは動画学習コンテンツを配信しています!

 動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。

 ぜひチャンネル登録お願いします🙇‍♂️→クリ★スタYoutubeチャンネル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA