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

时间:2017-06-08 15:43:18

标签: html responsive-images srcset pixel-density

这是我的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%">
&#13;
&#13;
&#13;

我正在使用imgix,它根据dpr查询参数以正确的像素密度返回图像。以上似乎不起作用,图像不会以正确的大小呈现。我没有使用正确的格式吗?

1 个答案:

答案 0 :(得分:3)

您无法在x属性中混合wsrcset个描述符。

我不知道imgix,但我想?w=800&h=480&dpr=2会返回尺寸为1600x960像素的图片。 https://myserver.com/image?w=800&h=480&dpr=2https://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
  • 屏幕密度2,视口宽度等于或低于1200px
  • 屏幕密度3,视口宽度等于或低于800px