[Firefox/CSS] imgの縦横サイズが保たれない場合の対処法

#状況

画像の遅延読み込みの為、srcに直接URLを指定せずにdata属性に指定して、JavaScriptで置き換える処理を行っていた。

<img data-src="https://example.jp/super.png">

このimg要素にはheight / widthが指定されているが、Firefoxにおいては縦横サイズが保たれずに、JSによるsrc置き換え後の画像ロード後に縦横サイズが決まるような動きであった。
Chrome や Safari では問題なし。

#対処法

#そもそもの原因

Firefoxだと、img要素にscrが無い場合に「壊れた画像」として扱われ、縦横サイズを指定してもサイズが保たれないようである。(altの内容だけを表示される)

#コード

srcにダミー画像をセットしておけば解決するが、下記のようなCSSを指定する事でも解決する。

img {
  -moz-force-broken-image-icon: 1;
}

-moz-force-broken-image-icon – CSS | MDN

twitterfacebookhatenafacebook