対応方法 img:is([sizes=”auto” i], [sizes^=”auto,” i]) { contain-intrinsic-size: 3000px 1500px }
公開日
by
WordPress 6.7 では、wp_print_auto_sizes_contain_css_fix による調整が入りました。
これにより、遅延読み込み(lazy-load)が有効な画像に対して、特定の条件下で画像が縦や横に伸びて表示される現象が報告されています。
通常は aspect-ratio プロパティなどが指定されていれば問題ありませんが、テーマやCSSの構成によっては表示が崩れるため、対処方法をご紹介します。
wp_print_auto_sizes_contain_css_fix を無効化する
表示崩れが発生する場合は、function.php に以下を追記することで、この調整の読み込みを止めることができます。
remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );
サイトに独自のカスタマイズを加えている場合は、この調整が原因で画像が崩れる可能性があります。その場合は無効化を検討してください。
無効化せず利用する場合は、aspect-ratio などのCSS指定を追加し、表示崩れが起こらないように調整すると安心です。
まとめ
WordPress 6.7で追加された調整は、多くのケースで有効ですが、テーマやカスタマイズ次第で思わぬ表示崩れにつながることがあります。問題が起きた場合は、上記の対応を試すことで解決できます。