画像が縦伸び・・・
一昨日に気づいたのですが、このサイトのここ1年分くらいの横長画像が急に縦伸びになっていました。
あれ、これはいつから・・・！
ちなみに、テーマはLIONMEDIAです。
下写真は琵琶湖畔ランより。
PC版でもスマホ版でもどちらでもで、自分の環境だとスマホ版の方がひどかったです。
心当たりは、というと、最近PHPのバージョンの更新をしたことでした。
何度も更新のリコメンドのコメントが出たのでついに更新しました。
＊バックアップをとってはいます。
＊Wordpressのバージョンか何か別なものも更新したかもしれませんし、そちらなのかも。
CSSの問題部分を発見
さて、このトラブルについて状況確認していますと、OKのページとNGのページがありました。
自分が見たNGのページは
figure class=”wp-block-image”
img src=”https://・・・”
という具合です。
＊<>消しました
ＯＫのところは上記1行目のかわりに、
img class=”alignnone size-large wp-image-16478″
や
figure class=”wp-block-gallery columns-1 is-cropped”
などがありました。
これを見て、何か記事作成時の図の張り方に依存しているのか、何かのバージョンの違いによるのかな、と思いました。
また、CSSのwp-block-image imgが設定不足で、PHPの更新か何かと重なって起きたのかな、と思いました。
コード追加にて対応実施
検索しますとこちらのエビワークスさんのページに到着
中ほどの「画像の縦伸び問題」が該当します。
そちらにある、以下のコードをCSSに追加しました。
.wp-block-image img {
height:auto;
}
なお、CSSへの追加は
こちらのSamrai BrogさんのサイトのCSS修正の書き方をふまえて、
以前にやったことがある、子テーマの編集で追加しました。
これで問題は解消されまして、安心しました。
ちなみに、上記の問題が、スマホ表示の時だけ発生するケースもあるようです。
その辺はワードプレステーマのそれぞれの問題なのかな、と思います。
おしまい！
