スマホ版Chromeの、画像の縦横比が崩れるのを直した

このブログの表示がスマホ版のChromeだとちょっと変な感じになっていました。

具体的には、画像が横に縮まって見えていました。このサイトはレスポンシブデザインにしています。

画像サイズに合わせてデザインが可変するようにしているんですが、Chromeのスマホ版で表示した時には高さはそのままで横幅が狭くなっていたのです。

その結果、縦横比が崩れ、写真が縦に引き伸ばされたような状態になっていました。

＊

直せないかと色々と検証してみると、画像を挿入する際のimgタグに付く、幅を指定するwidthタグと高さを指定するheightタグを削除すれば正常になることがわかりました。

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

何かいい方法はないかとさらにウェブ検索をしてみると、「CSSで画像のheightにautoを指定すればうまくいく」という記事を発見。早速試してみましたが、やはり表示は崩れたままでした。

＊

正直、ウェブサイト制作のことはそれほどよくわかっていないので、これ以上、自力で解明するのは無理だなと判断しました。そこでいつもお世話になっている、ヤフー知恵袋へ質問を投げてみることにしました。

すると一時間ほどで回答が一つ付きました。それによると、「CSSで画像に指定しているwidthとheightの後ろに!importantをつけてみてはどうか」という提案でした。

!importantは、「優先して実行する」ことを適用させることができます。「なるほど、そういうことか！」と試してみたら、あっさりと問題は解決。写真は崩れることなくきちんと表示されることとなりました。

＊

集合知という言葉がありますが、自分ひとりの知識など本当にたかが知れています。自分で何十分も悩んで検証を繰り返すより、詳しい人に教えてもらうのが一番ですね。

この記事も、もし同じ問題で躓いた方がいればたどり着いて欲しい、そんな思いで書きました。ネット上へ有益な情報を上げることで、お互いが役に立てれば最高ですね。

Tweet