HTML - srcset无法使用w？不产生图像？

Question

好吧，我曾在html工作过一段时间，但现在正试图建立一个完全响应的网站，根据设备提供响应式图像/更改。我需要这个用于客户端，并且将在CSS中使用媒体调用，但是在srcset上找到了一个教程，声称它是实现此目的的正确方法。

我的人已指定他们想要为以下内容加载单独的图片： - 桌面 -iphone 6s -iphone 6plus / ipad pro - 其他/小型手机

我的图像每边有20像素的边距，这意味着我需要图像为屏幕的宽度 - 40像素。

我去了https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions并按照src设置上的教程提出了这些尺寸，考虑到何时将2或3乘以分辨率（我想我已经掌握了像素/分辨率的处理方式）作品）：

• 桌面：768px
• iphone 6s：670px
• iphone 6 plus：1122px
• 其他手机：240px

然后我写了以下内容，阅读浏览器后会根据屏幕大小切换到正确的图像：

>>> recFib(20)
[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181]
>>> recFib(10)
[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
>>> recFib(19)
[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584]

然而，无论我如何伸展浏览器，都没有任何效果。我明白了：

我在这里做错了什么？ w的值是图像的大小 - 这不应该是屏幕尺寸对吗？我该如何解决这个问题？

Answer 1

在src和srcset中的图像之前删除斜杠将显示图像。

src="/images/home-desktop.jpg"

到

src="images/home-desktop.jpg"

或，取决于位置

src="../images/home-desktop.jpg"

这是我做的一个例子。使用浏览器进行缩放，图像会发生变化。

<img src="http://i.imgur.com/TvWMgVA.jpg" srcset="http://i.imgur.com/5aVGfyV.jpg 670w, http://i.imgur.com/IfcHwWe.jpg 1122w, http://i.imgur.com/dHDGSBO.jpg 240w, http://i.imgur.com/JVDFaMT.jpg 768w">

在allMobile.jpg之后删除逗号，