wp_enqueue_img_auto_sizes_contain_css_fix() │ WP 6.9.0

Enqueues 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.

Hooks from the function

Returns

null. Nothing (null).

Usage

wp_enqueue_img_auto_sizes_contain_css_fix(): void;

Notes

Changelog

Since 6.9.0 Introduced.

wp_enqueue_img_auto_sizes_contain_css_fix() code WP 6.9

wp-includes/media.php 
function wp_enqueue_img_auto_sizes_contain_css_fix(): void {
	// Back-compat for plugins that disable functionality by unhooking this action.
	$priority = has_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix' );
	if ( false === $priority ) {
		return;
	}
	remove_action( 'wp_head', 'wp_print_auto_sizes_contain_css_fix', $priority );

	/** 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;
	}

	$handle = 'wp-img-auto-sizes-contain';
	wp_register_style( $handle, false );
	wp_add_inline_style( $handle, 'img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}' );

	// Make sure inline style is printed first since it was previously printed at wp_head priority 1 and this preserves the CSS cascade.
	array_unshift( wp_styles()->queue, $handle );
}