CSS:明确img图片的宽度和高度的教程

当你在google page sight或lighthouse中测试一个网站时，你可以看到当你没有指定图片尺寸时，累积布局移动得分很高。

如果你没有指定图片的宽度和高度，页面加载时就会发生偏移，造成不好的体验。

这里有一个错误图像元素没有明确的宽度和高度

这个错误发生在没有定义固定宽度和高度的图像img 标签上。

如果你没有指定高度和宽度，浏览器将无法理解宽度和高度，这将导致累积的布局转移。

有多种方法可以固定img标签的宽度和高度属性

在img标签上添加带有像素的宽度和高度属性

将width 和height 属性添加到img 标签，并加上像素值。

<img width="500" height="200" src="image.png"/>

用CSS，

我们可以用css代码轻松地添加以下属性

img {
  max-width: 100%;
  height: auto;
    aspect-ratio: 16/9;

}