WordPress 6.3 画像のアスペクト比設定が Safari・Firefox で反映されない - 原因と解決法

結論から申し上げますと

3年前、WordPress 5.4→5.5 移行時に問題となった画像の縦横比トラブルを解決するために指定した

img {width:auto; max-width:100%; height:auto;}

の width:auto; が、今回の不具合の原因となりました。削除して

img {max-width:100%; height:auto;}

のようにすることで解決。Safari・Firefox でも無事正常表示されました。

背景・経緯など

WordPress6.3がリリースされて1週間あまり。6.2.2からアップデートされた方も多いと思います。画像のアスペクト比（縦横比）の見え方を設定できる新機能 ・・・ 使い勝手良好ですね！

多くのWeb制作者にとって重宝している aspect-ratio が、誰でも管理画面からGUIで使えるようになったのは素晴らしいと思います🙂 WP6.2.2までの「元画像をトリミング加工して保存・配置」する形とは異なり、切り抜かれた画像が新たにメディアライブラリに増えてしまうこともありませんし。

アスペクト比 [ 元のサイズ ]

元画像が縦横比そのまま表示されます。

アスペクト比 [ 正方形 1:1 ] 　伸縮 [ cover ]

元の横長画像が（ブラウザ上で）正方形に見えるよう、端が切り落とされた状態で表示されます。

アスペクト比 [ ポートレイト 3:4 ] 　伸縮 [ cover ]

同様に、縦長に切り出された状態で表示されます。

ブラウザによっては不具合が

しかしながら ・・・ Chrome・Edgeでは指定したアスペクト比で表示されるものの、Safari・Firefoxではそれがオモテ側に反映されないという不具合が発生。管理画面上ではちゃんと見えているのに！

冒頭に記した通り、3年前 WP5.4 → 5.5アップデート時の画像縦横比の不具合に対応するために書き足したCSSが今回の不具合の原因になったわけですが （参考：過去記事「WordPress 5.5 で画像の縦横比がおかしくなる問題 – 対処法・解決法」）

ここ数日、その過去記事に急激にアクセスが増えていることから ・・・ 6.3へのアップデートによって同じ問題に直面している方々がいるのかも？ 中には、かつて当方の記事を読んだことで、3年越しの今まさに不具合で困っている人もいるかも（ゴメンナサイ）と思い、これを書いている次第です；

WordPress6.3 のデフォルトCSSはどうなっているのか

管理画面ブロックパネルで、任意の画像について（例えば） アスペクト比を [ 正方形 1:1 ]　伸縮 [ cover ] で指定すると、当該 img タグの style=”xxxxx” 内にインラインCSSとして書き出されます。

要素 {
  aspect-ratio: 1;
  object-fit: cover;
}

その img タグ全体に効いている、WPシステム側の style.min.css は

.wp-block-image img {
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

となっています。width は指定されていません。

ちなみに、Chrome・Edgeでは、使用中テーマの style.css に width: auto; が書かれていても aspect-ratio の挙動には問題がなく、管理画面ブロックパネルで指定したアスペクト比が反映されます。

しかし、Safari・Firefoxでは挙動が異なり（width: auto; が優先されるようで）元画像の縦横比のまま表示されてしまいます。折角の新機能が「効いてないよー！」状態です。

そんなこんなで

原因と解決方法は冒頭に記した通りですが ・・・ もし、お手元の環境でも Safari・Firefox で同じ問題が起こっている場合には、当該箇所の 【 img に width: auto; が効いていないか 】 確認してみてくださいませ。失礼しました🙇