2

Here's my img tag:

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

I'm using imgix which returns the image in correct pixel density based upon the dpr query parameter. The above does not seem to work, the image is not rendered in the right size. Am I not using the correct format?

4

1 回答 1

7

您不能在属性中混合使用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
  • 屏幕密度 2，视口宽度等于或小于 1200px
  • 屏幕密度 3，视口宽度等于或低于 800 像素
  • 等等
于 2017-06-09T14:12:52.737 回答