小金井にあるWEB制作会社の備忘録

MEMORANDUM

CSS「object-fit」を使って画像を表示枠に合わせてトリミング

画像を表示枠いっぱいに表示する場合に、背景画像や「position」等で対応していたけど、「img」タグに一行追加するだけで縦横比を変えずに簡単に実装できる方法があったのでメモ。

CSS

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

上記の「object-fit」プロパティーを指定の「img」に追加するだけ。
幅と高さは親要素で設定していない場合は指定する。

「object-fit」プロパティーで使える値

説明
fill(初期値)表示枠内を満たすように縦横比を変えながらリサイズ。
cover縦横比を保持して表示枠いっぱいにリサイズ。
縦横のうち小さい方を基準にして自動的にリサイズし、表示枠からはみ出した部分はトリミングされる。
contain縦横比を保持し、表示枠に収まるようにリサイズ。
幅と高さのうち大きい方のサイズに合わせて比率を保持して表示枠にフィット。(不足部分は余白が発生)
noneリサイズせず、そのまま表示。
scale-downnone と contain のうち、小さい方のサイズに合わせて表示。