ズボラ応援ブログ始めました

cssのみで画像の縮小や切り抜きができるobject-fitプロパティ

object-fitプロパティを使うと、cssのみで画像の縮小や切り抜きができるようになります。

object-fitプロパティ

object-fitプロパティで指定できる値は5つあります。

こちらの150×180の画像を200×100のスペースに表示すると次のようになります。

object-fit:fill;

アスペクト比を維持せず、指定サイズ全体を埋める

初期値。

object-fit:contain;

アスペクト比を維持して画像全体を指定サイズ内に収め、足りない部分は余白ができる。

object-fit:cover;

アスペクト比を維持して指定サイズ全体を埋める。はみ出た部分はカットされる。

object-fit:none;

リサイズせずそのまま表示。

はみ出た部分はカット、足りない部分には余白ができる。

object-fit:scale-down;

noneまたはcontainの小さい方が採用される。

object-fit: cover;の1行を追加するだけで、簡単に画像のトリミングができます。

ただし表示上のサイズを変えているだけなので、画像の容量は変わりません。



object-positionプロパティ

object-positionプロパティは要素をどこに配置するかを指定するものです。

初期値は50% 50%で、真ん中に配置されます。

0% 0%だと左上基準、100% 100%だと右下基準になります。

px値で指定することもできます。

タイトルとURLをコピーしました