图像元素没有明确的宽度和高度

Question

Lighthouse 一直告诉我“图像元素没有明确的宽度和高度”，尽管我已经尝试在 css 或 img 中添加它，但问题仍然存在：

img.medium {
  max-width: 29rem;
  width: 100%;
}

或

<img
   src={user.seller.logo}
   alt={user.seller.name}
   width="100%"
   height="auto"
/>

我该如何解决这个问题？

Answer 1

简答

将图像的原始宽度和高度（以像素为单位）添加为图像的属性。这让浏览器计算图像的纵横比。

<img width="600" height="400" src="some-image.webp"/>

长答案

width: 100% 没有给元素明确的宽度。

它的作用是定义相对于其父容器的宽度。

height:auto 也没有给图像一个明确的高度，你是在指示浏览器根据图像比例或容器的大小来设置它认为合适的图像高度。

最大的问题是图片的高度（虽然100%的宽度不是很明确，但是纯粹根据CSS计算实际宽度会很容易）。

请求页面时，浏览器在开始下载之前不知道图像的比例。

出于这个原因，页面呈现（假设您有 inlined your critical CSS) then it requests the image and finds out how tall the image is. The container for the image will then change size to accommodate this image and you will get a layout shift, contributing to cumulative layout shift。

如何修复

选项 1 - 使用属性定义宽度和高度

选项一是使用属性将图像的高度和宽度定义为表示像素的整数：

<img width="600" height="400" src="some-image.webp"/>

在现代浏览器中，这将用于计算图像的纵横比，然后在图像开始下载之前在页面上分配足够的 space。

然后您可以像现在一样使用 width:100%; height: auto;，一切都会按预期工作。

Using width and height attributes is the recommended best practice.

请注意 - 如果您使用 CSS 覆盖尺寸（因此 width=200 height=100 会给出与 width=400 height=200 相同的结果，假设您在 CSS).

中设置了宽度

选项 2 - 使用“纵横比框”

在这种技术中，您将图像高度定义为 CSS 内宽度的比例。

本质上，我们给图像一个零高度，然后使用填充来分配正确数量的 space。

.image-div {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%; /*aspect ratio of 16:9 is 100% width and 56.25% height*/
  background: url(/images-one.webp);
}

如果不需要support Internet Explorer (as it is a little temperamental) you can use calc().

padding-top: calc(900 / 1600 * 100%);

这个padding technique is explained in detail in this article from css-tricks.

虽然这有点 hack，但优点是您的图片没有内联属性，因此对于喜欢保持 HTML 干净的人（以及某些场景，例如您想要使所有图像具有相同的宽高比）

两者都有问题

这两种技术只有一个问题，您需要在渲染之前知道图像的宽度和高度，以便计算纵横比。

除非您愿意为图像制作一个固定高度和宽度的容器，否则您无法避免这种情况。

然后，如果图像与您的容器的宽高比不同，图像周围会有一些白色 space，但页面不会有布局偏移（在大多数情况下这会更可取）- 假设您在容器上使用 overflow:hidden 等。

.container{
  width:50vw; 
  height:28.125vw; /*fixed height, doesn't have to be aspect ratio correct, see example 2 */
  overflow:hidden;
  margin: 20px;
}
.container2{
  width:50vw; 
  height:40vw; /*fixed height, but this time there is extra white space (shown as dark grey for the example) below the image.*/
  overflow:hidden;
  background: #333;
  margin: 20px;
}
img{
    width: 100%;
    height: auto;
}

<div class="container">
<img src="https://placehold.it/1600x900"/>
</div>

<div class="container2">
<img src="https://placehold.it/1600x900"/>
</div>

图像元素没有明确的宽度和高度

Image elements do not have explicit width and height

image

lighthouse

reactjs

简答

长答案

如何修复

选项 1 - 使用属性定义宽度和高度

选项 2 - 使用“纵横比框”

两者都有问题