为 CLS(Cumulative Layout Shift)设置 100% 宽度的图像高度
Set height of image with 100% width for CLS (Cumulative Layout Shift)
为了处理 Core Web Vitals 的 CLS,我需要找到一种方法来设置当图像在屏幕上的宽度为 100% 时 img
标签的高度,因为 每当 window 调整大小 时,图像都会发生变化。我正在使用的网站是基于 WordPress 构建的,并找到了解决方法。所以,我会写如何在WordPress上管理它。
首先,我们可以通过wp_get_attachment_image_src
获取图片的宽高。
$featured_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) , 'thumbnail' );
// $featured_image[0]: URL of an image
// $featured_image[1]: Width of an image
// $featured_image[2]: Height of an image
利用CSS的100vw
和$featured_image
的值,我们可以得到图像的高度。
$ratio = $featured_image[2] / $featured_image[1];
然后,将其设置为如下高度。
<img
src="<?php echo $featured_image[0]; ?>"
style="
width: 100%;
height: calc(100vw * <?php echo $ratio ;?>);
"
/>
图像的最佳实践
按照 OP 的要求,一种更通用的方法是使用原生 width
和 height
属性简单地设置图像的宽度和高度(以像素为单位)。
This is what is advised as the modern best practice
假设浏览器拥有计算宽度所需的所有信息(来自内联 CSS),现代浏览器将为图像分配足够的 space 以避免布局偏移。
这些宽度和高度不必是图像将显示的实际大小,只要是正确的比例即可。
因此在下面的示例中,我们获取图像缩略图的宽度和高度(比如 640px 宽和 480px 高)。
然后我们在 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; ?>" />
Fiddle 演示
在下面 fiddle 我加载了一张大图片(您可能仍想添加限制以查看没有布局偏移)。 space 由浏览器自动计算,因此不会发生布局偏移。
最大的优势是以下内容适用于媒体查询(因为您可以在内联 CSS 中设置任何宽度)并且可以与内容安全策略一起正常工作,因为它不依赖于内联 style
项。
<style>
img{
width: 50%;
height: auto;
}
</style>
<img src="http://picserio.com/data/out/369/sahara-desert-wallpaper_5757536.jpg" width="6400" height="4800" />
<p>I don't shift</p>
为了处理 Core Web Vitals 的 CLS,我需要找到一种方法来设置当图像在屏幕上的宽度为 100% 时 img
标签的高度,因为 每当 window 调整大小 时,图像都会发生变化。我正在使用的网站是基于 WordPress 构建的,并找到了解决方法。所以,我会写如何在WordPress上管理它。
首先,我们可以通过wp_get_attachment_image_src
获取图片的宽高。
$featured_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) , 'thumbnail' );
// $featured_image[0]: URL of an image
// $featured_image[1]: Width of an image
// $featured_image[2]: Height of an image
利用CSS的100vw
和$featured_image
的值,我们可以得到图像的高度。
$ratio = $featured_image[2] / $featured_image[1];
然后,将其设置为如下高度。
<img
src="<?php echo $featured_image[0]; ?>"
style="
width: 100%;
height: calc(100vw * <?php echo $ratio ;?>);
"
/>
图像的最佳实践
按照 OP 的要求,一种更通用的方法是使用原生 width
和 height
属性简单地设置图像的宽度和高度(以像素为单位)。
This is what is advised as the modern best practice
假设浏览器拥有计算宽度所需的所有信息(来自内联 CSS),现代浏览器将为图像分配足够的 space 以避免布局偏移。
这些宽度和高度不必是图像将显示的实际大小,只要是正确的比例即可。
因此在下面的示例中,我们获取图像缩略图的宽度和高度(比如 640px 宽和 480px 高)。
然后我们在 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; ?>" />
Fiddle 演示
在下面 fiddle 我加载了一张大图片(您可能仍想添加限制以查看没有布局偏移)。 space 由浏览器自动计算,因此不会发生布局偏移。
最大的优势是以下内容适用于媒体查询(因为您可以在内联 CSS 中设置任何宽度)并且可以与内容安全策略一起正常工作,因为它不依赖于内联 style
项。
<style>
img{
width: 50%;
height: auto;
}
</style>
<img src="http://picserio.com/data/out/369/sahara-desert-wallpaper_5757536.jpg" width="6400" height="4800" />
<p>I don't shift</p>