スマホ版Chromeで画像の縦横比が崩れた→【解決】

ブログの表示が、スマホ版Chromeで見ると変な感じになっていました。
具体的には、画像が縦に引き伸ばされたように見えました。

Safariやファイアフォックスだときちんと表示されるのにChromeだけで不具合が出る。
これは直さなくては、と調査しました。

結果的に、スタイルシートに!importantをつけると直りました。

スマホ版Chromeでの、画像の縦横比の不具合

色々検証してみると、imgのwidthとheightタグを削除すれば正常になるとわかりました。

でも、それまでブログにアップしてきた画像はたいへんな枚数です。
それらすべてのwidthとheightタグを削除するのはかなりの労力です。

何かいい方法はないか、さらにウェブ検索すると、「CSSで画像のheightにautoを指定すればうまくいく」という記事を発見。

さっそく試してみましたが、やはり表示は崩れたままでした。

正直、ウェブサイト制作はそれほどよくわかっていないので、これ以上、自力で解明するのは無理と判断。

そこでヤフー知恵袋へ質問を投げてみることにしました。
すると一時間ほどで回答が一つ付きました。

それによると、「CSSで画像に指定しているwidthとheightの後ろに!importantをつけてみてはどうか」という提案でした。

「なるほど、そういうことか。」と試してみたら、あっさり解決。

写真は崩れることなくきちんと表示されることとなりました。

集合知という言葉がありますが、自分ひとりの知識など本当にたかが知れています。

自分で何十分も悩んで検証を繰り返すより、詳しい人に教えてもらうのが一番ですね。

この記事も、もし同じ問題でつまずいた方がいればたどり着いて欲しい、そんな思いで書きました。