WordPress5.5.1へアップデートしたらgurtengergで入れた画像が縦伸びしてしまった

wordpressを5.5.1へアップデートしてしまうと、今までgurtengergの機能で画像を入力したものが、縦に伸びてしまったのでその対処方法をメモ書きとして残させていただきます。

gurtengergを使った画像を入れた時に起こった問題について

今回wordpress5.5.1へアップデートを行ったら、gurtengergの画像入力を使った時の画像がどう見ても縦に伸びているように見える問題が発生しました。

この現状は、どうやら横幅に対しては、max-size:100%が当たっているようで横幅は伸縮するのですが、画像の縦サイズに関しては gurtengergで画像のサイズを変更する時に決定されているようで、縦サイズは変更されないまま横幅のサイズが変更されてしまう問題が起きて、画像が縦に伸びている状態になってしまいました。

こうなっている方は多いのでしょうか？

画面サイズより、画像が小さい場合は縦に伸びないことは確認できましたが、大きい場合は縦サイズが固定されたまま縦伸びしてしまっているようです。

gurtengergで入れた画像に対してcssを当てて対処してみる

上述で縦に伸びた画像をどうにかする方法について書かせていただきます。

gurtengergのhtmlモードに変えて直接書き換えて height:auto と記述してもいいのですが、全部のページををそうやって変えていくのは非常に大変ですよね。

そこでcssでなんとかしてみようと思います。

 .wp-block-image img {
    max-width: 100%;
    height: auto!important;
}

上述のように、gurtengergの画像は .wp-block-imageというクラスで囲まれているので、こちらにheight:autoをimportant要素で画像のアス比が変わらないようにして見ましょう。

.wp-block-imageで変わらない場合は、それより上のid,classなどを指定して変えてみるとimportant要素を指定しなくても変わると思います。

まとめ

今回はwordpressをアップデートしたら画像が縦に伸びてしまったという問題について書かせていただきました。簡易的ではありますが、css側で対処できますのでこちらの方法で対応されて見てはいかがでしょうか。