概述

该函数用于注册并内联添加一个 CSS 规则，以修复使用 `sizes=auto` 属性的图片可能出现的视觉问题。它通过覆盖默认用户代理样式表中的类似规则，防止图片因 `width: auto` 或 `width: fit-content` 而显示过小。

关键要点

• 函数 `wp_enqueue_img_auto_sizes_contain_css_fix()` 在 WordPress 6.9.0 中引入，用于处理图片的 `sizes=auto` 属性相关样式问题。
• 通过 `wp_register_style()` 和 `wp_add_inline_style()` 动态添加 CSS 规则 `img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}`。
• 包含向后兼容性检查：如果 `wp_print_auto_sizes_contain_css_fix` 动作未被钩入，则函数提前返回；同时移除该动作以避免重复执行。
• 使用过滤器 `wp_img_tag_add_auto_sizes` 控制是否启用自动尺寸功能，若禁用则函数提前返回。
• 通过 `array_unshift()` 确保内联样式在样式队列中优先打印，以保持 CSS 层叠顺序。

代码示例

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 );
}

注意事项

• 该函数依赖于 WordPress 核心样式系统，使用 `wp_styles()` 对象管理样式队列。
• 开发者可通过过滤器 `wp_img_tag_add_auto_sizes` 自定义是否启用此功能，默认值为 true。
• 相关资源链接：HTML 规范、WordPress Trac 工单 #62413 和 #62731，供进一步参考。