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

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 计算实际宽度会很容易）。

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

出于这个原因，页面呈现（假设您已经内联了您的关键 CSS）然后它请求图像并找出图像的高度。然后图像的容器将更改大小以容纳该图像，您将获得布局偏移，从而导致累积布局偏移。

如何修复

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

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

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

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

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

使用width和height属性是推荐的最佳实践。

请注意- 如果您使用 CSS 覆盖尺寸，则宽度和高度值只需是正确的纵横比（因此width=200 height=100会产生与width=400 height=200假设您在 CSS 中设置宽度相同的结果）。

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

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

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

.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);
} 

如果您不需要支持 Internet Explorer（因为它有点喜怒无常），您可以使用calc().

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

css-tricks 的这篇文章详细解释了这种填充技术。

虽然这有点小技巧，但优点是你的图像没有内联属性，所以它对喜欢保持 HTML 干净的人很有用（以及在某些情况下，例如如果你想让所有图像具有相同的纵横比）

两者的问题

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

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

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

.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);
} 

.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;
}