コーディングするときに、「どんな大きさの画像がきてもこの大きさに固定したい」「画像の大きさを均等にしたい」と思ったことありませんか？
今回紹介するCSSのプロパティの「object-fit」を使えば、上記の問題を簡単に解消することができます。
Contents
画像をトリミングする
object-fit:cover;
下の画像のように、縦横比を固定したまま画像をトリミングしたい時に、 object-fit:cover;を使います。画像は縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミングされます。
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
トリミングせず余白を表示する
object-fit:contain;
先程のcoverの値をcontainに変えることで、画像をトリミングせず、余白を表示してボックスの中央に画像を表示することもできます。
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
任意の位置でトリミングする
object-fit:cover;でトリミングした画像にさらに、object-positionを指定することでトリミングする基準点を変更することができます。
//指定なし 中央揃え
object-position:;
//左揃え
object-position:0 100%;
//右揃え
object-position:100% 100%;
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
