WPにてLionMediaというテーマを使ってブログを投稿、スマホで表示される画像が縦長に表示されてしまうのを直したい

Question

前提・実現したいこと

Wordpressにて
LionMediaというテーマを使ってブログを書いています。
ブログにアップしている画像がスマホで表示した時に縦長に伸びてしまう画像がいくつかあります。
不自然に見えるので自然な比率に戻したいのですが
具体的にどこの何を直したら良いでしょうか？

問題のページ

http://bboy48.com/airpods-review

↑iphoneで閲覧すると

インナーイヤー型は密閉されていないので圧迫感がなく、外の音も聞こえる。

と書いてある下の画像が縦長になってしまっています。

以前同じような質問をされた方の記事を見たのですが自分のページだとどこを直せばよいのか分からなかったため質問させていただきました。

よろしくお願いいたします。

Answer 1

画像を挿入した場合に、画像に付けられる一部のclassには高さ調整のcssが当てられているのですが、classが付けられない画像もあるようです。

問題の画像はその例で、imgタグ内にwidthとheightが自動で挿入されていますが、css側ではwidthの指定があるけどheight指定が抜けおちているため、スマホでの表示時に

横幅　⇒　cssの指定サイズ
高さ　⇒　imgタグ内のheight属性

という組合せになってしまうために、縦横比が異なってしまうのが原因です。

Web制作者でないならば上記の理屈は気にしなくても構いません(笑)

要するに、CSS内に

.content img { height: auto; }

の１行を追加してみてください。これで解決するはずです。

Comments

[48illskill]

解決しました！！教えていただいた通りCSS内に　.content img { height: auto; }　を入れた所一発で治りました。お忙しい中、本当にありがとうございます！

[kota1010]

解決してよかったです！^^