wp_img_tag_add_auto_sizesの対策

WordPress 6.7から imgタグのsizes属性にautoが追加。その影響でブラウザの固有スタイルが優先されて画像サイズがズレる問題があります。

ユーザーエージェントスタイルシート

img:is([sizes="auto" i], [sizes^="auto," i]) {
contain: size !important;
contain-intrinsic-size: 300px 150px;
}


この対策として6.7.1から headタグ内に上書き用の img:is([sizes=”auto” i], [sizes^=”auto,” i]) のスタイルが追加されています。

contain-intrinsic-sizeの指定を除去する

headタグ内の追加コード

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


これは
wp-includes/media.php
の2068行目の関数 wp_print_auto_sizes_contain_css_fix() で追加されていて、この処理は
wp-includes/default-filters.php の614行目のadd_action()で登録されているので、下記のコードで取り外せます。

修正スタイルを除去するコード

remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', 1 );


imgタグにsizes属性を出力していない場合は、除去しても影響はありません。sizes属性を出力していてズレる場合はautoの指定自体を解除する方法もあります。

sizes属性のautoを除去する

sizes属性へのauto追加は
wp-includes/media.php の1151行目にあります。
これは 1141行目の apply_filters() のフィルター wp_img_tag_add_auto_sizes で制御できる構成のため、下記のコードで auto を除去できます。
これにより、2070行目の制御により上のwp_print_auto_sizes_contain_css_fixも除去されます。

auto追加を停止するコード

add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );