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

Question

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

33

尽管我已经试过在 CSS 或 img 中添加宽度和高度，但 Lighthouse 一直告诉我“图像元素没有明确的宽度和高度”。以下是问题的内容：

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

或

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

我该如何解决这个问题？

- Francesco

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GrahamTheDev · Accepted Answer

简短回答

在图像上添加原生宽度和高度的像素属性。这使浏览器可以计算图像的纵横比。

<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覆盖尺寸，则宽度和高度值只需具有正确的纵横比即可（因此，假设您在CSS中设置了宽度，则width = 200 height = 100将产生与width = 400 height = 200相同的结果）。

选项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的这篇文章中详细解释。

虽然这有点像一个hack，但好处是您的图像上没有内联属性，因此对于那些喜欢保持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>