WEBサイト作成時に発生するエラーやトラブル対応の備忘録を中心に、いろいろと書いております。


WP5.5で画像が縦長になるのを解決する

WordPressが5.5になってから、画像が縦長になったという報告をいただき調べていますが、上記の画像を見ている限り(汚い家ですみません)そんな感じはない……のですが、それは自分で作ったオリジナルのテーマのスタイルシートに「height: auto;」が入っているからということがわかりました。

WordPress5.5になってから、画像ブロックの画像にwidthとheightがしっかり描かれるようになっております。

<!--WP5.4.1-->
<figure class="wp-block-image size-large"><img src="https://www.terastella.com/wp-content/uploads/2020/08/P3102036.jpg" alt="" class="wp-image-1885" srcset="https://www.terastella.com/wp-content/uploads/2020/08/P3102036.jpg 400w, https://www.terastella.com/wp-content/uploads/2020/08/P3102036-300x225.jpg 300w" sizes="(max-width: 400px) 100vw, 400px" /></figure>


<!--WP5.5-->
<figure class="wp-block-image size-large"><img loading="lazy" width="400" height="300" src="https://www.terastella.com/wp-content/uploads/2020/08/P3102036.jpg" alt="" class="wp-image-1885" srcset="https://www.terastella.com/wp-content/uploads/2020/08/P3102036.jpg 400w, https://www.terastella.com/wp-content/uploads/2020/08/P3102036-300x225.jpg 300w" sizes="(max-width: 400px) 100vw, 400px" /></figure>

そして、WordPress側が提供しているスタイルシート(wp-includes/css/dist/block-library/style.min.css)には

.wp-block-image img{max-width:100%;}

max-width:100%;しか入っていません。ここにheight:auto;が入ってくれていたらよかったのか、テーマで吸収すべきことなのか?

スマホ対応でブラウザサイズに合わせて画像横幅が変わるようになっているのですが、高さはimgで指定されたheightで固定されるため、見る環境では縦長になるということだと思われます。

こういうのって、WordPressに連絡したほうがいいのかなぁと思いつつ、仕方がわからない……。

それとも起こってないのかなぁ。テーマで吸収してるようなところも多そうなので、気づくのはごくまれ?なのかも。私もとあるお客様からご報告いただかなかったら絶対気づかなかったわー。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください