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 set 的教程得出了这些尺寸，同时考虑了何时乘以 2 或 3 以获得分辨率(我想我已经掌握了像素/分辨率的工作原理):

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

然后我写了以下阅读浏览器将根据屏幕尺寸切换到正确的图像:

<img src="/images/home-desktop.jpg" srcset="/images/home-iphone6s.jpg 670w, /images/iphone6plus.jpg 1122w, /images/allMobile.jpg, 240w, /images/home-desktop.jpg 768w">

然而，无论我如何拉伸(stretch)浏览器，都没有任何效果。我明白了:

我在这里做错了什么？ 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后面的逗号，