レスポンシブでデフォルト画像をCSSで設定

一覧表示をflexやgridで作り、幅によって4列・3列・2列と変わるような画面。 そしてその中に画像のない項目があり、それにはクラスがついていて、サイズ可変の正方形背景を出したいとき！ 素直に画像を吐き出せばいいのにカートの都合とかでできない！って場合に！ そんなときに使えるCSSを作ってみました。 出力されるタグが

No Image

とします。 /*NOIMAGE*/ .noImage { background:url(［出したい画像URL］); background-repeat:no-repeat; background-size:contain; position:relative; line-height:1em; text-indent:-100%; overflow:hidden; } .noImage::after { content:""; display:block; padding-bottom:calc(100% - 1em); } 要は::after要素をスペーサーとして使い、paddingで100%の縦幅を取ってやれば正方形が作れるわけです。 paddingは親要素の横幅基準ですからこの場合は.noImageの横幅です。 中に入っている1行分をcalcで引いています。