图像元素没有明确的宽度和高度 [英] Image elements do not have explicit width and height

问题描述

灯塔一直告诉我图像元素没有明确的宽度和高度".即使我尝试将其添加到css或img中，但问题仍然存在:

Lighthouse keeps telling me that "Image elements do not have explicit width and height" eventhough i've tried to add it both in css or in img but the problem persists:

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

或

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

我该如何解决?

推荐答案

简短回答

将图像的本机宽度和高度(以像素为单位)添加为图像上的属性.这样浏览器就可以计算图像的长宽比.

Short Answer

Add the image's native width and height in pixels as attributes on the image. This lets the browser calculate the aspect ratio for the image.

< img width ="600''高度="400"src =" some-image.webp"/>

宽度:100％不能为元素提供明确的宽度.

width: 100% does not give an element an explicit width.

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

What it does is define the width relative to it's parent container.

height:auto 也不给出图像的明确高度，您是在指示浏览器根据图像比例或容器大小将图像高度设置为它认为合适的高度.

height:auto also does not give an image an explicit height, you are instructing the browser to make the image height whatever it thinks is appropriate based on the image proportions or the size of the container.

最大的问题是图像的高度(尽管100％的宽度不是很明显，但仅通过CSS即可计算出实际宽度很容易).

The biggest problem with this is the height of an image (as although the width of 100% is not explicit, it will be easy to calculate the actual width purely from the CSS).

当请求页面时，浏览器直到开始下载时才知道图像的比例.

When the page is requested the browser does not know the proportions of the image until it starts downloading.

因此，页面呈现(假设您已经内嵌了关键CSS)然后请求图像并找出图像的高度.然后，图像的容器将更改大小以容纳该图像，并且您将获得版式移位，从而导致累积版式移位.

For this reason the page renders (assuming you have 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.

第一种方法是使用属性将图像的高度和宽度定义为表示像素的整数:

Option one is to define the image height and width as integers representing pixels by using attributes:

< img width ="600''高度="400"src =" some-image.webp"/>

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

In modern browsers this will then be used to calculate an aspect ratio for the image and sufficient space will then be allocated on the page before the image starts downloading.

然后您可以使用 width:100％;height:自动； 就像您现在所做的一样，它们都将按预期工作.

You can then use width:100%; height: auto; as you do now and it will all work as expected.

使用 width 和 height 属性是推荐的最佳做法.

Using width and height attributes is the recommended best practice.

请注意-仅当您使用CSS覆盖尺寸时，宽度和高度值才必须是正确的宽高比(因此 width = 200 height = 100 假设您在CSS中设置了宽度，则结果将与 width = 400 height = 200 相同.

please note - the width and height values only have to be the correct aspect ratio if you are using CSS to override the dimensions (so width=200 height=100 would give the same result as width=400 height=200 assuming you set the width in the CSS).

通过这种技术，您可以将图像高度定义为CSS内宽度的比例.

In this technique you define the image height as a proportion of the width within your CSS.

本质上，我们为图像设置零高度，然后使用填充来分配正确的空间量.

In essence we give the image a zero height and then use padding to allocate the correct amount of 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);
} 

如果您不需要支持Internet Explorer(因为有点气质)，则可以使用 calc() .

If you don't need to support Internet Explorer (as it is a little temperamental) you can use calc().

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

这篇填充技术在css-tricks中详细介绍了

尽管这有点麻烦，但是优点是图像上没有内联属性，因此它对于希望保持HTML整洁的人很有用(对于某些情况，例如，如果您希望使所有图像都相同长宽比)

Although this is a bit of a hack, the advantage is no inline attributes on your images, so it is useful for people who like to keep their HTML clean (and for certain scenarios such as if you want make all images the same aspect ratio)

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

There is only one issue with both techniques, you need to know the image width and height before they are rendered in order to calculate the aspect ratio.

除非您愿意为图像制作一个固定的高度和宽度容器，否则您可以做很多事情来避免这种情况.

There isn't much you can do to avoid this unless you are willing to make a fixed height and width container for the image.

然后，如果图像与容器的宽高比不同，则图像周围会有一些空白，但是页面不会发生版式移位(在大多数情况下更可取)-假设您使用 overflow:隐藏等.

Then if the image is a different aspect ratio to your container you will have some white space around the image but the page will not have a layout shift (which would be preferable in most circumstances) - assuming you use overflow:hidden etc. on the container.

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

这篇关于图像元素没有明确的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！