为 CLS（累积布局偏移）设置 100% 宽度的图像高度

Question

为了处理 Core Web Vitals 的 CLS，我需要找到一种在img图像在屏幕上为 100% 宽度时设置标签高度的方法，因为只要调整窗口大小，图像的高度就会发生变化。我正在开发的网站是基于 WordPress 构建的，并找到了解决方法。所以，我会写一下如何在WordPress上管理它。

Answer 1

图像的最佳实践

width执行OP要求的更通用的方法是使用本机和属性简单地设置图像的宽度和高度（以像素为单位）height。

这是建议的现代最佳实践

假设浏览器拥有计算宽度（来自内联 CSS）所需的所有信息，现代浏览器将为图像分配足够的空间，以避免布局变化。

这些宽度和高度不必是图像将显示的实际尺寸，只需正确的比例即可。

因此，在下面的示例中，我们获取图像缩略图的宽度和高度（例如 640 像素宽和 480 像素高）。

然后我们在 CSS 中设置图像相对于其容器的宽度（因此在本例中为页面宽度的 50%）。

然后，浏览器将为图像分配正确的高度，以避免布局变化。（在下面的示例中，假设屏幕宽度为 1920 像素，它将分配 720 像素高度 - 由于宽度为 50%，因此分配 960 像素宽的图像，然后分配 720 像素高度以保留宽高比。）

$img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) , 'thumbnail' );
$src = $img[0]; 
$height = $img[1]; //e.g. 640(px)
$width = $img[2]; //e.g. 480(px)



<style>
    img{
       width: 50%; 
       height: auto; /*this is important as otherwise the height set on the image will be used*/
    }
</style>

 <img src="<?php echo $src; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />

小提琴演示

在下面的小提琴中，我加载了一个大图像（您可能仍然想添加节流以查看没有布局变化）。空间由浏览器自动计算，因此不会发生布局变化。

最大的优点是下面的内容适用于媒体查询（因为您可以在内联 CSS 中设置任何宽度），并且可以与内容安全策略一起正常工作，因为它不依赖于内联style项目。

$img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) , 'thumbnail' );
$src = $img[0]; 
$height = $img[1]; //e.g. 640(px)
$width = $img[2]; //e.g. 480(px)



<style>
    img{
       width: 50%; 
       height: auto; /*this is important as otherwise the height set on the image will be used*/
    }
</style>

 <img src="<?php echo $src; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />