即使设置 CSS min-height，Lighthouse 也会报告高 CLS

Question

Lighthouse 中的累积布局偏移报告很高：0.546

分析跟踪我注意到图像块最初没有占用所需的空间并将下面的内容向下推。见图片：

我对此感到惊讶，因为图像元素的容器 div 具有最小高度设置：

CSS

div[itemprop="image"] {
    display: inline-block;
    float: left;
    margin-right: 10px;
    min-height: 400px;
}

#prodimage {
    width: 100%;
    max-width: 400px;
    border: 1px solid #FFF;
}

HTML

<div itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">                
    <a href="#"><span itemprop="url" content="https://www.example./com/images/10055041.png"></span>
        <picture><source type="image/webp" data-srcset="/images/10055041.webp" srcset="/images/10055041.webp">
            <img id="prodimage" data-src="/images/10055041.png" src="/images/10055041.png">
        </picture>
    </a>
</div>

Answer 1

您需要在您的内联 CSS 中为图片指定高度和宽度。

当您放置 <img/> 元素时，浏览器在联系服务器之前不知道它有多大。

当您内联 CSS 后，浏览器将完全根据初始请求（您的页面 HTML 和内联样式）呈现页面。

因此，它会尝试计算布局，通过内联 CSS 查找图像的大小信息，找不到任何宽度信息，因此不知道为图像分配多少水平空间。

然后浏览器从您的服务器请求图像，找出大小并知道由400px分配400px。

这是您的布局发生变化的地方，它从 0px 宽 400px 高空间变为 400px 宽 400px 高（加上 1 像素边框）空间。

通过为图像分配min-height，您已经完成了一半，但您还需要为图像定义min-width。

因此，您的 CSS 应该是：

div[itemprop="image"] {
    display: inline-block;
    float: left;
    margin-right: 10px;
    min-height: 400px;
    min-width: 400px;
}

更好的图片处理方式

作为一个额外的想法，一个更好的选择，而不是为图像设置定义的尺寸是使用响应式布局。

您所做的是将图像添加到<div> 等，其宽度定义为百分比。

然后你把你的<img/> 和width: 100% 放在<div> 里面。

这样就解决了浏览器计算宽度的问题。

要计算高度，然后将width="400" 和height="400" 添加到<img/>。

在大多数浏览器中，他们使用它来计算图像aspect-ratio。

这让浏览器通过将宽度乘以纵横比来分配足够的垂直高度。

示例

在以下示例中，您会注意到我将 <img/> 的宽度设置为 40，高度设置为 40。

这是为了表明您在此处设置的内容并不重要，只要它们是正确的纵横比即可。 （所以在 16:9 的图像上，即使图像是 800 x 450，您也可以设置 width="16" 和 height="9"）。

浏览器遵循以下流程：

• 屏幕上的 div 有多大（在 660 像素宽的屏幕上是 200 像素。）。
• 图片的宽度（100% * 200 像素 = 200 像素）。
• 什么是纵横比？ （宽/高 => 40 / 40 = 1:1）。
• 将计算出的宽度乘以高度（200 像素 * 1）。

因此，浏览器会在开始请求之前为图像分配 200 x 200 像素的空间，因此您不会发生布局变化。

<style>
   .holder{
       width: 33%;
       background-color: #333;
   }
   img{
       width: 100%;
       height: auto;
   }
</style>

<div class="holder">
  <img src="https://placehold.it/400x400" width="40" height="40" />
</div>
    
    <p>text that will not move</p>