在 srcset 中指定图像大小和像素密度

Question

这是我的img标签：

<img src="https://myserver.com/image?w=667&h=375 667w" 
  srcset="https://myserver.com/image?w=1366&h=1024 1366w 1x,
  https://myserver.com/image?w=1366&h=1024&dpr=2 1366w 2x,
  https://myserver.com/image?w=1366&h=1024&dpr=3 1366w 3x,
  https://myserver.com/image?w=1024&h=768 1024w 1x,
  https://myserver.com/image?w=1024&h=768&dpr=2 1024w 2x,
  https://myserver.com/image?w=1024&h=768&dpr=3 1024w 3x,
  https://myserver.com/image?w=800&h=480 800w 1x,
  https://myserver.com/image?w=800&h=480&dpr=2 800w 2x,
  https://myserver.com/image?w=800&h=480&dpr=3 800w 3x" sizes="100%">

我正在使用 imgix，它根据dpr查询参数以正确的像素密度返回图像。以上似乎不起作用，图像未以正确的尺寸呈现。我没有使用正确的格式吗？

Answer 1

您不能在属性中混合使用x和w描述符srcset。

我不知道 imgix，但我想?w=800&h=480&dpr=2返回一个尺寸为 1600x960 像素的图像。是https://myserver.com/image?w=800&h=480&dpr=2和https://myserver.com/image?w=1600&h=960&dpr=1相同的图像？

如果图像在每个可见尺寸上始终相同（相同的内容和相同的纵横比），您应该定义您需要的可见/CSS 尺寸（取决于您的设计，例如 800、1200 和 1600 像素）并编写以下内容：

<img
  src="https://myserver.com/image?w=800&h=400"
  srcset="https://myserver.com/image?w=800&h=400 800w,
    https://myserver.com/image?w=1200&h=600 1200w,
    https://myserver.com/image?w=1600&h=800 1600w,
    https://myserver.com/image?w=2000&h=1000 2000w,
    https://myserver.com/image?w=2400&h=1200 2400w,
    https://myserver.com/image?w=2800&h=1400 2800w,
    https://myserver.com/image?w=3200&h=1600 3200w"
  sizes="100vw">

该?w=2400&h=1200图像将被浏览了几个配置下载：

• 屏幕密度 1，视口宽度等于或小于 2400px
• 视口宽度等于或小于 1200px 的屏幕密度 2
• 屏幕密度 3，视口宽度等于或小于 800px
• 等等。