ブログの表示が、スマホ版Chromeで見ると変な感じになっていました。具体的には、画像が横に少し潰されたように見えました。
このサイトはレスポンシブデザインにしています。Chromeのスマホ版で表示すると、高さはそのままで横幅が狭くなっていたのです。その結果、縦横比が崩れ、写真が縦に引き伸ばされたような状態になっていました。
Safariやファイアフォックスだときちんと表示されるのにChromeだけで不具合が出る。これは直さなくては、と調査しました。
膨大な枚数の画像をすべて修正するのは不可能
色々検証してみると、imgのwidthとheightタグを削除すれば正常になることがわかりました。でもそれまでブログにアップしてきた画像はたいへんな枚数になっています。それらすべてのwidthとheightタグを削除するのはかなりの労力です。
何かいい方法はないかさらにウェブ検索してみると、「CSSで画像のheightにautoを指定すればうまくいく」という記事を発見。早速試してみましたが、やはり表示は崩れたままでした。
!importantを指定するとうまくいった
正直、ウェブサイト制作はそれほどよくわかっていないので、これ以上、自力で解明するのは無理と判断しました。そこでいつもお世話になっている、ヤフー知恵袋へ質問を投げてみることにしました。
すると一時間ほどで回答が一つ付きました。それによると、「CSSで画像に指定しているwidthとheightの後ろに!importantをつけてみてはどうか」という提案でした。
「なるほど、そういうことか！」と試してみたら、あっさり問題は解決。写真は崩れることなくきちんと表示されることとなりました。
みんなで助け合って生きていきましょう
集合知という言葉がありますが、自分ひとりの知識など本当にたかが知れています。自分で何十分も悩んで検証を繰り返すより、詳しい人に教えてもらうのが一番ですね。
この記事も、もし同じ問題で躓いた方がいればたどり着いて欲しい、そんな思いで書きました。ネット上へ有益な情報を上げることで、お互いが役に立てれば最高です。
