我的图片在上次WP6.7更新后就损坏了吗？

移动设备浏览时图像扭曲问题

可能最近有同学发现，在WordPress更新后，尤其是通过移动设备浏览时，某些图像完全扭曲了，不再是以前的图片比率。这个问题可能与WordPress 6.7版本或更早版本有关，同时在网页的区域会生成如下的style代码：

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

默认响应图像

从WordPress 4.4版本开始，WordPress就已内置了对响应图像的支持。这意味着当你上传图片时，WordPress会自动生成不同尺寸的图片，并在你网站的img标签中包含srcset和sizes属性。这样，浏览器就能根据用户的屏幕大小和分辨率加载最合适的图像，从而提高网站性能。

CSS代码解析

上述CSS代码中的img:is是一个CSS选择器，目标是具有sizes属性的img元素。具体来说，该选择器会匹配使用sizes="auto"属性或具有以"auto"开头的sizes属性的img标签。通常，这段CSS代码会影响由WordPress内置函数（例如wp_get_attachment_image()）生成的图片。

contain-intrinsic-size属性

contain-intrinsic-size是CSS包含模块（CSS Containment）的一个部分，用于指定元素的固有大小，尤其是在使用CSS包含时。该属性用于防止布局偏移，并提高性能，特别是对于具有固有纵横比的元素（如图像和视频），当它们的尺寸尚不可用时（例如，在图像完全加载之前）。3000px 1500px会将图像的固有大小设置为宽度3000px，高度1500px。

图像扭曲的原因

那么，为什么此属性会导致图像扭曲呢？原因很简单：它会覆盖图像的“自动”尺寸属性。如果你的图像宽度固定为100%，而高度设置为“自动”，那么使用此属性后，宽度仍然会固定为100%，但高度会被设置为1500px，这就导致了图像比例的扭曲。

content-visibility属性的影响

为什么要实现这个属性，尤其是它的影响这么大呢？这与另一个属性——content-visibility相关。这两个新指令旨在优化性能，特别是在管理屏幕外内容的可见性时。WordPress一直致力于提升Gutenberg编辑器的用户体验和性能，因此这些新特性是为了进一步增强其超高性能。但遗憾的是，这些属性的实现仍然不稳定，尤其是在定制化设计方面，带来了较大的影响。

解决方法

针对这个问题，推荐直接删除contain-intrinsic-size属性，因为没有其他CSS属性能补充该代码以恢复图像的正常显示。我们可以通过在functions.php文件中添加以下代码来解决问题，以下代码由WordPress官方团队提供：

/**
 * 优化图片标签：移除 img 标签中 sizes 属性里开头的 "auto, " 字符串
 *
 * @param string $image HTML 格式的图片标签字符串。
 * @return string 更新后的图片标签字符串。
 */
function my_optimize_img_tag( $image ) {
    return str_replace( ' sizes="auto, ', ' sizes="', $image );
}
add_filter( 'wp_content_img_tag', 'my_optimize_img_tag' );

/**
 * 优化附件图片属性：移除 sizes 属性开头的 "auto, " 前缀
 *
 * @param array $attr 图片标签的属性数组。
 * @return array 更新后的属性数组。
 */
function my_optimize_image_attributes( $attr ) {
    if ( isset( $attr['sizes'] ) ) {
        // 使用正则表达式去除开头可能存在的 "auto, " 和后面的空白字符
        $attr['sizes'] = preg_replace( '/^auto,\s*/', '', $attr['sizes'] );
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'my_optimize_image_attributes' );

通过这些修改，我们可以避免contain-intrinsic-size带来的问题，恢复图像的正常显示，并提升网站的性能。