画像の配置が表示画面の大きさによってPC/タブレット/携帯に対し、それぞれ表示方法をする。

PCで表示する場合は、一行に1/2サイズ1つ＋1/4サイズ2つ、或いは1/4サイズ4つを表示。

タブレットで表示する場合は一行にフルサイズ1つ或いは1/2サイズ2つを表示。

携帯で表示する場合はすべての画像を1列にして表示。

 

[codepen_embed height=”720″ theme_id=”light” slug_hash=”rmJmrq” default_tab=”result” user=”darkorcale”]See the Pen Responsive images list with object-fit: cover; by darkorcale (@darkorcale) on CodePen.[/codepen_embed]