Question

我已经进入CSS很长一段时间了，但是图像元素的srcset和sizes让我很困惑。这是一个我认为可行的例子。

<img alt="Background image flowers"
    srcset="img/flowers-480.jpg 480w,
            img/flowers-480@2x.jpg 480w 2x,
            img/flowers-768.jpg 768w,
            img/flowers-768@2x.jpg 768w 2x,
            img/flowers-960.jpg 960w,
            img/flowers-960@2x.jpg 960w 2x,
            img/flowers-1280.jpg 1280w,
            img/flowers-1280@2x.jpg 1280w 2x" 
    sizes="(max-width: 1279px) 100vw,
           (min-width: 1280) 1280px"
    src="img/flowers-960.jpg">

我们的想法是让图像具有100％的视口，直到视口宽度为1280像素或更宽，然后图像将是固定大小。但是，为了补偿更高的DPI设备，我认为建议添加DPI描述符（1.5x，2x等），如建议的here和here。

我认为上面的代码会做的是：

检查尺寸，查看图像的尺寸大小（如果给出相对单位，如％或vw，则计算像素宽度）
找到srcset宽度中最接近该宽度的图像
从这些图像中过滤出最接近设备DPI的DPI描述符

但是，当我通过验证器时，我收到以下错误：

错误：元素img上属性srcset的值不正确：图像img/flowers-480@2x.jpg的宽度与图像的宽度相同 img/flowers-480.jpg

很明显，我完全忽略了srcset和size的工作原理。我做错了什么？

Answer 1

正如MDN <img srcset="...">所定义的那样：

每个字符串由以下内容组成：

图片的网址，可选地，空格后跟一个：


宽度描述符或直接正整数   然后是＆＃39; w＆＃39;。宽度描述符除以源大小   在sizes属性中给出，以计算有效像素密度。

像素密度描述符，其是正浮点数   直接跟着＆＃39; x＆＃39;。

你试图同时使用这两种，这是非法的。

Answer 2

根据MDN，“在同一srcset属性中混合宽度描述符和像素密度描述符是不正确的。重复描述符（例如，同一srcset中的两个源都用'2x'描述）也是无效的。“

你有2次上市4次。那是无效的。

以下是来自MDN的示例：

示例4：使用srcset和sizes属性

在使用'w'描述符时，在支持srcset的用户代理中忽略src属性。当（最大宽度：600px）介质条件匹配时，图像宽度为200px，否则宽度为50vw（视口宽度的50％）。

<img src="clock-demo-thumb-200.png" 
    alt="Clock" 
    srcset="clock-demo-thumb-200.png 200w,
    clock-demo-thumb-400.png 400w"
    sizes="(max-width: 600px) 200px, 50vw">

结合HiDPI监视器了解srcset和大小

2 个答案: