好吧，我已经使用 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 的值是图像的大小——这不应该是屏幕大小，对吗？我该如何解决这个问题？
最佳答案
删除 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后面的逗号，
关于HTML - srcset 不能使用 w？不产生图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39402635/