Php 如何提供不同的响应图像？

在本网站上：

• .php

• .jquery

• .以易为本

我们需要有两个或更多不同的信息图形图片，这取决于视口的宽度

• 客户对w3c验证很挑剔

• picturefill解决方案未验证

• 不同的图像，而不仅仅是不同的图像版本，应该被服务

• 由于很多原因，背景图像不是解决方案*

• IE8及以上支持

我可以使用服务器端或客户端版本，没有问题

原因：

背景图像技术确实有效，但这些信息图形不是背景

它们应该到达服务器端

显然，他们需要适应。（和背景尺寸…嗯…）

更糟糕的是，我们确实有与这些信息图形相关联的响应性工具提示图像地图

---

您可以使用

背景图像

属性，然后通过媒体查询更改每个视口宽度的背景图像

---

顺便说一句，就W3C验证而言，您可能正在使用HTML5进行站点验证，而HTML5还没有正式的验证程序；）

您可以使用媒体查询。

---

只需对容器应用不同的样式，并根据视口大小交换图像即可。当然，这需要将图像设置为背景，而不是使用img标记。

如果媒体查询不是您想要的，则可以使用，如果操作正确，则可以加载

如果internet explorer兼容性有问题，请使用filter属性检查宽度并设置背景图像。（你可以使用条件评论黑客使其生效，它只会在internet explorer上读取）如果IE8和旧版本的兼容性存在问题，另一种可能性是使用“我更新了我的问题”。我不会和客户争论HTML5验证器是否是官方的。但如果是在W3C网站上，我看不出我们还能得到更多的“官方信息”。）如果你尝试他们的HTML5验证器，你会得到一个警告“使用实验性功能：HTML5一致性检查器”。然后它会告诉你你没有使用他们的服务，但是当它出现在他们的网站上时，它只是为了方便——它不是他们的产品；）不是我不想要，而是我不能拥有我试过了，脚本已经加载，但是图像似乎没有切换。我应该在插入后打电话吗？重新调整大小和document.ready后，此操作是否有效？找到了。忘记添加Response.create以触发所有事件。干杯。如果媒体查询失败，Javascript确实是唯一可行的选择。请参阅Starx的答案。

<-- Load lo-fi.png  when viewport is 0–480px wide or no-js. 
    Load medium.png when viewport is 481–1024px wide. 
    Load hi-fi.png  when viewport is 1025px+ wide. --> 

<img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />