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プロパティの優れた点として、画像のレスポンシブ対応を簡単に実施することができるという点になります。先ほど使用した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プロパティの使い方を理解することで、縦横比の調整ができ、画像のレスポンシブ対応ができるようになります。レスポンシブコーディングに苦手意識を持つことなく自信を持って取り組んでいきましょう♩

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

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

ぜひチャンネル登録お願いします🙇‍♂️→PLAYJOBYoutubeチャンネル

2 COMMENTS

コメントを残す

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

CAPTCHA