#69 画像の描画領域を決めるアスペクト比とobject-fit

要するに、背景画像ならbackground-size:cover。imgタグとvideoタグなら、object-fit:coverと覚えるのがいいかな。

例えば、画像の描画領域が100px * 100pxで、画像のアスペクト比が1:1ではない場合、どのように描画すればよいのかを指定するobject-fitプロパティ

指定なし、object-fit:initial, object-fit:fillでは、横長の画像の場合、縦に引き伸ばされて歪んだ描画になる。

object-fit:coverは、画像を中心からズームインしてトリミングする

object-fit:containは、アスペクト比を保って全体表示するが、領域の一部が空白になる。

object-fit:noneは、画像の元サイズのまま中央部分だけ表示される

デモ

例えば、縦長の画像や動画もobject-fit:coverで全画面表示にすることができる。ただアスペクト比からはみ出る部分はトリミングされて見れなくなる。

デモ

ヘッダーの絵はゴッホのアルルの女　ジヌー夫人