wp_print_auto_sizes_contain_css_fix()

💡 云策文档标注

概述

wp_print_auto_sizes_contain_css_fix() 函数用于打印 CSS 规则，以修复使用 sizes=auto 的图像可能出现的视觉问题。该函数在 WordPress 6.9.0 中已被弃用，建议使用 wp_enqueue_img_auto_sizes_contain_css_fix() 替代。

关键要点

函数打印 CSS 规则，覆盖默认用户代理样式表中的类似规则，防止使用 width: auto 或 width: fit-content 的图像显示过小。
自 WordPress 6.9.0 起弃用，应改用 wp_enqueue_img_auto_sizes_contain_css_fix() 函数。
通过 wp_img_tag_add_auto_sizes 过滤器控制是否启用自动尺寸功能。
相关资源包括 HTML 规范、WordPress Trac 工单和 GitHub 链接。

注意事项

使用前需检查 WordPress 版本，避免在 6.9.0 及以上版本中继续使用此弃用函数。
确保正确配置 wp_img_tag_add_auto_sizes 过滤器以控制行为。

📄 原文内容

Prints a CSS rule to fix potential visual issues with images using sizes=auto.

Description

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.

Source

function wp_print_auto_sizes_contain_css_fix() {

	_deprecated_function( __FUNCTION__, '6.9.0', 'wp_enqueue_img_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>

	</pre><p class="wporg-dot-link-list"><a href="https://developer.wordpress.org/reference/files/wp-includes/deprecated.php/">View all references</a> <a href="https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/deprecated.php#L6479">View on Trac</a> <a href="https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/deprecated.php#L6479-L6491">View on GitHub</a></p></section>

		<section class="wp-block-wporg-code-reference-hooks"><h2 id="hooks" class="is-toc-heading wp-block-heading has-heading-5-font-size" tabindex="-1" ><a href="#hooks">Hooks</a></h2> <dl><dt class="wp-block-wporg-code-reference-title has-normal-font-size"><a href="https://developer.wordpress.org/reference/hooks/wp_img_tag_add_auto_sizes/"><span class="hook-func">apply_filters</span>( ‘wp_img_tag_add_auto_sizes’,  <nobr><span class="arg-type">boolean</span> <span class="arg-name">$enabled</span></nobr> )</a></dt><dd><p>Filters whether auto-sizes for lazy loaded images is enabled.</p>

</dd></dl></section>

		<section class="wp-block-wporg-code-reference-related" data-nosnippet="true"><h2 id="related" class="is-toc-heading wp-block-heading has-heading-5-font-size" tabindex="-1" ><a href="#related">Related</a></h2> <section style="margin-top:var(--wp--preset--spacing--20)" class="wp-block-wporg-code-table" id="uses"><figure class="wp-block-table "><table><thead><tr><th scope="col">Uses</th><th scope="col">Description</th></tr></thead><tbody><tr class=""><td><a href="https://developer.wordpress.org/reference/functions/_deprecated_function/">_deprecated_function()</a><code>wp-includes/functions.php

Marks a function as deprecated and inform when it has been used.



apply_filters()wp-includes/plugin.php

Calls the callback functions that have been added to a filter hook.

Changelog

Version	Description
6.9.0	Deprecated. Use wp_enqueue_img_auto_sizes_contain_css_fix() instead.
6.7.1	Introduced.

云策 WordPress 开发者社区

函数文档