我想实现一个解决方案，其中服务器应用程序返回的图像刚好大到足以覆盖整个设备屏幕在任何给定的方向
我一直在学习一些关于HTTP Client Hints方法，其中浏览器将发送信息以及对图像的请求，如屏幕大小，像素密度等。然后服务器可以解析该信息并返回适当大小的图像。
这样我就不必对我现有的图像标签<img src="/myniceimage.jpg" />进行任何修改，并且额外的信息将随着请求一起发送。
遗憾的是，似乎对此HTTP客户端提示功能的支持有限，请参阅http://caniuse.com/#feat=client-hints-dpr-width-viewport
我能看到的唯一替代这个功能(所以支持不限于Chrome)是将图像移动到data-src，这样浏览器就不会自动加载它，然后有一些javascript函数手动加载图像，并在请求的标题中发送屏幕分辨率和像素密度。
是否有其他的方法来获得屏幕大小和像素密度发送到服务器，不需要我移动我的图像链接到data-src，并有一个javascript函数手动加载它们。或者是否有其他方法让服务器使用所有浏览器发送的现有标头来推断或估计该信息?
谢谢!
这取决于你想投资什么。您需要以某种方式将所需的信息(图像的渲染宽度)填充到HTTP请求中，浏览器将其发送回服务器。
除了Client Hints(专门设计用于提供此功能)或使用Javascript之外，唯一的方法是劫持srcset属性。但请注意，如果你想要像素完美的响应，这个解决方案几乎是优雅的:
<img srcset="
foo.1px.jpg 1w,
foo.2px.jpg 2w,
foo.3px.jpg 3w,
...
foo.998px.jpg 998w,
foo.999px.jpg 999w,
foo.1000px.jpg 1000w
">
这样，当图像应该是1px宽时，浏览器请求foo.1px.jpg, foo.2px.jpg为2px宽，以此类推和无限。
如果你有一个有限的图像大小集合，比如200px, 500px，并且任意大于500px，那么srcset实际上是真正的解决方案:
<img srcset="
foo.large.jpg 501w,
foo.500px.jpg 500w,
foo.250px.jpg 250w
">