オブジェクトフィット

#m-primula .m-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
#he*der .visual img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 30px;
}

これ(上)素晴らしいCSS!

古いホムペで作ったのはテーブルのセルにサムネイルを入れ込むこと。大変な作業だったので作り直したいと思ってもずーっと放置していた。20年以上前のCSSバージョンではそれしか方法がなかったと思うが。。。

CSS ver.3?では上記のように、画像を1列に、任意の数のカラムを並べて、なおかつ画像の大きさを指定して、ページにフィットさせることができるの。

画像をグリッド表示できるなんてこの本を読むまで知らなかった。だからテーブルのセルだったんだけど。ホームページの品格が上がったように。🤓

、、、って自己満。

でも、スマホで見るホームページではみんなこんなだわ~。