chromeでは表示が崩れないがfirefoxだと画像の大きさが全て大きくなってしまっている。

Question

実現したいこと

chromeとfirefoxのレイアウトを揃えたい。

前提

wordpressでサイトの構築をしていたのですが、常にchromeでサイトを開いてレイアウトを確認していたのですが、firefoxを見てみたら画像崩れが酷くされてしまっておりました。

発生している問題・エラーメッセージ

chrome画像（こちらはスワイパーを使用しています。）

firefox画像（こちらはスワイパーを使用しています。）

chrome画像

firefox画像

該当のソースコード

cssではimgに以下を指定していますがfire-foxだと適用が外れてしまいます。

width: -webkit-fill-available;
height: auto;

試したこと

imgのwidthを変更してみましたが変わりませんでした。

Answer 1

Firefoxがfill-availableに対応していないので、-moz-availableも併記してみてはいかがでしょう。

【"fill-available" | Can I use... Support tables for HTML5, CSS3, etc】
https://caniuse.com/?search=fill-available

【要素内容に依存する幅の指定について | Unformed Building】
https://unformedbuilding.com/articles/css-intrinsic-width/

Comments

[leomessi]

ありがとうございます！
上記の指定でで画像のレイアウト直りました！

参考リンクも共有いただきありがとうございました！