remove_action( ‘wp_head’, ‘wp_print_auto_sizes_contain_css_fix’, 1 );

レイアウト崩れは、ascpect-ratio をグリッドでunset していたのが原因だった

<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>

このCSSルールセットが適用された場合の、emulsion テーマの表示はどのように変化するのか

contain-intrinsic-size を適用しない

ブラウザのユーザーエージェントスタイルで、適切な設定が行われているようです

閉じ角括弧の前に i (または I) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。

“Birds Wings” by Chanan Greenblatt/ CC0 1.0

“Sunset Landscape” by Ales Krivec/ CC0 1.0

contain-intrinsic-size を適用した場合

グリッドレイアウトや段組みレイアウトでは、明示的にサイズを指定すると、暗黙的なコンテンツベースの高さとは異なる扱いを受けます。要素は、単にその高さまでコンテンツで満たされた場合とは大幅に異なるレイアウトになるかもしれません。 auto none 値を指定すると、記憶された値がない場合に要素を contain-intrinsic-size: none にフォールバックし、コンテンツがないかのようにレイアウトすることができます。グリッドレイアウトや段組みレイアウトでは、コンテナーそのものが親要素からはみ出す可能性があり、予期しないページレイアウトになる可能性があるため、内在サイズとして 0px を設定するよりも常に推奨されます。

https://developer.mozilla.org/ja/docs/Web/CSS/contain-intrinsic-size

https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors

フィルタ関数

/**
 * Prints a CSS rule to fix potential visual issues with images using `sizes=auto`.
 *
 * This rule overrides the similar rule in the default user agent stylesheet, to avoid images that use e.g.
 * `width: auto` or `width: fit-content` to appear smaller.
 *
 * @since 6.7.1
 * @see https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size
 * @see https://core.trac.wordpress.org/ticket/62413
 */
function wp_print_auto_sizes_contain_css_fix() {
	/** This filter is documented in wp-includes/media.php */
	$add_auto_sizes = apply_filters( 'wp_img_tag_add_auto_sizes', true );
	if ( ! $add_auto_sizes ) {
		return;
	}

	?>
	<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
	<?php
}

[attr^=value]

attr という名前の属性の値が value で始まる要素を表します

[attr operator value i]

https://reference.hyper-text.org/css/propaty/contain-intrinsic-width

https://triple-underscore.github.io/css-contain-ja.html#style-containment

画像ファイルのパスと横幅は`srcset`属性

画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」ではないことに注意してください。

srcset="images/small.jpg 320w,
      images/medium.jpg 640w,
      images/large.jpg 1280w"

パスと横幅の間には半角スペースを挿入します。横幅の単位はpxでなくw（幅記述子）を用います。small.jpgは320pxの画像、medium.jpgは640pxの画像、large.jpgは1280pxの画像である、という情報をブラウザに伝えています。

画像ファイルのパスと横幅はsrcset属性

画像ファイルのパスと横幅は`srcset`属性