当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【サンプルデモ】CSS3のobject-fitで画像を簡単タイル表示 - Webデザインラボ

【CSS3】object-fit

object-fit:fill

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

 

 

object-fit:none

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

 

object-fit:contain

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

 

object-fit:cover

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

 

object-fit:scale-down

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