CSSのobject-fit【現役エンジニアが解説】

PROGRAM

今回は、CSSのobject-fitについて、3つの使い方に分け、簡単に解説していきます。

fill

object-fitプロパティの値をfillにすると、コンテンツボックス全体を埋めるよう引き伸ばされます。

オブジェクトのアスペクト比がボックスのそれと合わない場合、オブジェクトはボックスに合うように引き伸ばされます。

img{
    width:100px;
    height:150px;
    object-fit:fill;
}

上記のコードでは、全てのimg要素の画像を幅100ピクセル、高さ150ピクセルになるように、元のアスペクト比を無視して画像を引き伸ばしています。

cover

object-fitプロパティの値がcoverの場合、アスペクト比を維持してコンテンツボックス全体を埋めるサイズとなります。

オブジェクトのアスペクト比がボックスのそれと合わない場合には、オブジェクトはアスペクト比を変えないまま切り取られます。

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

上記のコードでは、全てのimg要素の画像を幅100ピクセル、高さ150ピクセルに収まるよう、アスペクト比を維持したまま、画像を切り取って表示しています。

contain

object-fitプロパティの値をcontainとした際には、アスペクト比を維持してコンテンツボックスに収まるよう拡大縮小されます。

オブジェクトのアスペクト比がボックスのそれと合わない場合は、オブジェクトはアスペクト比を変えないままレターボックス表示されます。

img{
    width:100px;
    height:150px;
    object-fit:contain;
}

上記のコードでは、全てのimg要素の画像を幅100ピクセル、高さ150ピクセルに収まるよう、アスペクト比を維持したまま、画像を拡大もしくは縮小して表示しています。