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

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) 然后它请求图像并找出图像的高度。然后图像的容器将更改大小以容纳该图像，您将获得布局转换，有助于cumulative layout shift。
如何修复
选项 1 - 使用属性定义宽度和高度
选项一是通过使用属性将图像高度和宽度定义为表示像素的整数:<img width="600" height="400" src="some-image.webp"/>在现代浏览器中，这将用于计算图像的纵横比，然后在图像开始下载之前在页面上分配足够的空间。
然后您可以使用 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 中宽度的比例。
本质上，我们给图像一个零高度，然后使用填充来分配正确的空间量。

.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 .
虽然这有点麻烦，但优点是图像上没有内联属性，因此对于喜欢保持 HTML 干净的人很有用(以及对于某些情况，例如如果您想让所有图像具有相同的纵横比)
两者的问题
这两种技术只有一个问题，您需要在渲染图像之前知道图像的宽度和高度，以便计算纵横比。
除非您愿意制作 ，否则您无法避免这种情况。固定高度和宽度的容器 对于图像。
然后，如果图像与容器的纵横比不同，则图像周围会有一些空白，但页面不会有布局偏移(这在大多数情况下是可取的) - 假设您使用 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>