object-fitで画像の表示方法を調整しよう

このレッスンでは、object-fitを使った画像の表示方法の調整を学び、異なる縦横比の画像を統一されたサイズで表示できるようになることを目標にします。「CSS object-fit 使い方」で調べている方向けです。

object-fitは、画像や動画を決まった大きさの枠にどう収めるかを指定します。coverは枠いっぱいに拡大して余白なくトリミング、containは全体が見えるように縮小します。

サンプルコードでは、150×150pxの正方形の枠に、横長の画像をobject-fit: cover;で収めています。画像の縦横比を保ったまま枠いっぱいに拡大され、はみ出した部分は自動的にトリミングされる様子を確認できます。

初心者がよくつまずくのが、object-fitを指定しない場合、画像は縦横比を無視して枠に合わせて引き伸ばされ、不自然に歪んでしまう点です。この歪みを防ぐためにobject-fitが使われる、という目的を理解しておくと使い方も覚えやすくなります。

異なる縦横比の画像が混在する一覧ページでも、この設定を使えばすべてのサムネイルを同じサイズの枠に統一して整った見た目にできます。ECサイトの商品一覧などで頻繁に使われる設定です。