WordPress 6.7で wp_print_auto_sizes_contain_css_fix() html head要素にフィルタ関数による CSSの追加が行われました
<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>emulsion テーマに与える影響
以下の右側の遅延読み込み画像が伸びて正常に表示されなくなりました。
原因は、テーマ側でgrid レイアウトの時に、aspect-ratio プロパティをunset しているために発生した模様で、修正は可能でした。
PC （chrome) では、この措置で正常に表示されるようになりましたが、モバイル (pxcel8 chrome)では、相変わらず画像は伸びたまま表示されるようです。
contain-intrinsic-sizeは、ブラウザ側で画像サイズを取得してユーザーエージェントスタイルが適用されているのにこれを上書きする理由と、サイズの根拠がわからないので、スタイルの変更を実験してみました。
3000px 1500px の値を変化させると、モバイル表示のサイズの問題が解決できる領域があることがわかりましたが、intrinsic（本質的）な値をルールセットでうまく指定する方法を考えるよりも、ブラウザの計算値を使用したほうが簡単に思われたため、このフィルタを今後のアップデートの機会に削除します。
属性セレクタに記述された i などの意味について：属性セレクター – CSS: カスケーディングスタイルシート | MDN
2024 11/30:
フィルターのソース
wp-includes/media.php wp_print_auto_sizes_contain_css_fix()
Unit test
現在のテーマのバージョンでは、遅延読み込みの場合以下のように表示されます
現在、テーマを使用中など修正を急ぐ必要がある場合は、以下のコードをテーマの lib/functions-global.php の末尾に追加してください。
remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );
