[css, js] 404エラーのimgタグをいい感じにスタイリングする

詳しく書いてある記事はこちらで、
https://bitsofco.de/styling-broken-images/
imgがbroken状態になるとbefore, after擬似要素使えるからよしなにやっつければおkという意味である。
この記事ではbefore, after擬似要素に背景色をつけてposition:absoluteで上に被せて消している。

私の場合は

  • どんなサイズの画像があるか事前にわからない
  • レスポンシブ
  • NO IMAGE画像素材を使う
  • Retina対応もする

ていう条件があった。

画像のサイズが固定であればimg::beforeのcontentにno-image画像設定すれば済む話だが、
これをどんなサイズの画像が表示されるかわからない、かつレスポンシブな画像に対してやってしまうと諸々崩れて悲しい結果になった。
解決策としてcontentに透明png、backgroundにno-imageを設定するのが一番手っ取り早いかなと思った:

See the Pen hide responsive image broken icon by Tenderfeel (@Tenderfeel) on CodePen.

サンプルみたく画像サイズがpxで指定できる場合はimgにoverflow:hiddenしておけばbroken iconは表示されなくなるが、
height:autoだったり%で指定していたりすると消えない。
こうなるともうCSSだけでは厳しいのでJavaScriptでerrorイベントにハンドリングして処理する:

See the Pen styling responsive image broken icon by Tenderfeel (@Tenderfeel) on CodePen.

errorになった画像にはサイズの情報がない状態になるので、それを補うためにpadding-topで領域を作る。
padding-topはだいたい16:9くらいになる56.25%を指定しておく。
imgはbefore擬似要素の上に配置するためにposition:absoluteを指定する。

lazyload系ライブラリを使うなら、errorのイベントハンドラで上の処理がやれる。


コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください