我的图片在上次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带来的问题,恢复图像的正常显示,并提升网站的性能。
comment 作者产生的cookie对bypass的影响