图像srcset的语法有什么问题

Question

我试图实现在相同的视图端口大小上显示正常和高分辨率的图像。就好像我在550px的低分辨率手机中渲染页面它应该显示低像素图像和高分辨率支持的手机如IPhone它应该显示高分辨率图像但它不起作用

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"
    srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg 550w,
            https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1000.jpg 2x 550w,
            https://webkit.org/demos/srcset/image-1x.png 1024w, 
            https://webkit.org/demos/srcset/image-2x.png 2x 1024w"  alt="imgsrcsettestimage">

Answer 1

您在同一选项中使用2x和1024w。你应该使用2x（或任何x）或使用1024w（或任何w）。

简而言之，你不能混合密度（x）和宽度（w）。因此，您应该根据实际要求修改代码以使用其中任何一个。

编辑：

显然，您需要的代码应该是这样的：

<img src="s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"

     srcset="s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg 550w,
             webkit.org/demos/srcset/image-1x.png 1024w, 
             webkit.org/demos/srcset/image-2x.png 2048w" 

             alt="imgsrcsettestimage">

我希望它能解决你的问题。