object-fitで画像をトリミングする方法

トリミングとは

画像の一覧を表示する時などで画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますよね
しかし。。。サイズが同じとは限りません！かといってPhotoshopを使ってすべての画像をリサイズできない時もありますよね。。。

そんな時はCSSでトリミングすると楽です！
今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します

object-fitプロパティの種類

object-fitプロパティCODE

See the Pen object-fit by ちいうさ (@zqnixpal-the-looper) on CodePen.

object-fit プロパティーには、全部で5種類の値が指定できるので必要に応じて変更してください

fill（初期値）

ボックス内を満たすように縦横比を変えながらリサイズされます

cover

縦横比を保持してボックスを完全に覆うようリサイズされます
縦横のうち小さい方を基準にして自動的にリサイズし、ボックスからはみ出した部分はトリミングされます

contain

縦横比を保持し、ボックスに収まるようにリサイズされます
幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせます

none

リサイズせず、そのまま表示します

scale-down

none と contain のうち、小さい方のサイズに合わせて表示します

画像を任意の位置でトリミングする

object-fit: cover; で画像の縦横比を保持したまま画像の中央でトリミングして表示できるようになりました
ですが。。。毎回画像の中央にフォーカスしたいとは限りません
中央以外の位置でトリミングしたい時は object-position プロパティーを設定しましょう
左上を基準にして、object-position: 横の位置 縦の位置; を記述すればOK

任意の位置のCODE

See the Pen Untitled by ちいうさ (@zqnixpal-the-looper) on CodePen.

レスポンシブ対応！高さを固定した画像の横幅を伸縮させる

縦と横のサイズを固定するのではなく、縦の高さのみを固定して、横幅は画面や親要素いっぱいに表示させたい
そんな時もこの object-fit: cover; が大活躍してくれます

横幅を伸縮させるCODE

See the Pen Untitled by ちいうさ (@zqnixpal-the-looper) on CodePen.