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

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

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

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

• 检查尺寸，查看图像的预期尺寸(如果给出了相对单位，例如 % 或 vw，则计算像素宽度)
• 在 srcset 宽度中找到最接近该宽度的图像
• 从这些图像中，过滤掉 DPI 描述符最接近设备 DPI 的图像

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

Error: Bad value for attribute srcset on element img: Width for image img/flowers-480@2x.jpg is identical to width for image img/flowers-480.jpg

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

Answer 1

定义见 MDN对于 <img srcset="..."> :

Each string is composed of:

a URL to an image, optionally, whitespace followed by one of:

• a width descriptor, or a positive integer directly followed by 'w'. The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.
• a pixel density descriptor, which is a positive floating point number directly followed by 'x'.

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