CSSだけで画像をトリミングする。
img { object-fit: cover; # 短辺/長辺の短い方がボックスと一致するように拡大/縮小される # はみ出た部分はトリミングされる。 /* その他の値 contain: アスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小される fill: ボックスに合うように全体を引き伸ばして表示される none: 拡大/縮小せずにトリミングされる scale-down */ }
サンプルプログラム&設定スクリプト
CSSだけで画像をトリミングする。
img { object-fit: cover; # 短辺/長辺の短い方がボックスと一致するように拡大/縮小される # はみ出た部分はトリミングされる。 /* その他の値 contain: アスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小される fill: ボックスに合うように全体を引き伸ばして表示される none: 拡大/縮小せずにトリミングされる scale-down */ }