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