图像SRCSET的语法中有什么问题

Question

正在尝试实现以在同一视图端口大小上显示正常和高分辨率的图像。就像我在550px的低分辨率手机中渲染页面一样，它应该显示低像素图像，并且在Hi-Jolution Supplortion Fepplationed手机（如iPhone）中，它应该显示Hi-Jolutions映像，但它不起作用

<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）和 width （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">

我希望它可以解决您的问题。