【CSS3】object-fit

object-fit:fill

画像はアスペクト比は無視して親要素の大きさに合わせてリサイズします。初期値

 

 

object-fit:none

画像はリサイズしません。

 

object-fit:contain

画像はアスペクト比を保ちながら縦か横の大きい方を基準に親要素の大きさにリサイズします。

 

object-fit:cover

画像はアスペクト比を保ちながら縦か横の小さい方を基準に親要素の大きさにリサイズします。ハミ出る部分は表示しません。

 

object-fit:scale-down

「none」または「contain」のどちらか小さい方で表示します。