验证器说我在元素 img 上的属性大小值不正确

Question

我无法验证我的图像元素并且找不到原因。 sizes 元素按预期工作，Chrome 加载正确的图像。

W3C-Validator 表示如下：

Bad value (max-width:768px)100vw, (min-width: 768px)45vw for attribute sizes on element img: Bad CSS number token: Expected a minus sign or a digit but saw ( instead at (max-width:768px)100vw,

这是我当前的标记。

<figure class="img" data-imageid="1">
    <img alt="alt" height="4329" sizes="(max-width:768px)100vw, (min-width: 768px)45vw" src="/7-mgl2164-1.avif" srcset="/7-mgl2164-1.avif 6494w,/7-mgl2164-1-3840px-2560px.avif 3840w,/7-mgl2164-1-1920px-1280px.avif 1920w,/7-mgl2164-1-960px-640px.avif 960w,/7-mgl2164-1-720px-480px.avif 720w,/7-mgl2164-1-600px-400px.avif 600w,/7-mgl2164-1-480px-320px.avif 480w,/7-mgl2164-1-240px-160px.avif 240w,/7-mgl2164-1-120px-80px.avif 120w" width="6494">
    <figcaption>
        <span>This is an image</span>
        <small>@Copyright</small>
    </figcaption>
</figure>

想法？

Answer 1

我认为您需要在媒体查询和大小之间添加一个 space：将 (max-width:768px)100vw 更改为 (max-width:768px) 100vw。

来自 MDN：

sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the hints we talked about earlier. In this case, before each comma we write:

A media condition ((max-width:600px)) — you'll learn more about these in the CSS topic, but for now let's just say that a media condition describes a possible state that the screen can be in. In this case, we are saying "when the viewport width is 600 pixels or less".

A space

The width of the slot the image will fill when the media condition is true (480px)

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes

验证器说我在元素 img 上的属性大小值不正确

Validator says I have a bad value for attribute sizes on element img

html

validation