オブジェクトフィット
2026年2月18日
#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列に、任意の数のカラムを並べて、なおかつ画像の大きさを指定して、ページにフィットさせることができるの。
画像をグリッド表示できるなんてこの本を読むまで知らなかった。だからテーブルのセルだったんだけど。ホームページの品格が上がったように。🤓
、、、って自己満。
でも、スマホで見るホームページではみんなこんなだわ~。
