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

Question

在这个网站上：

• .PHP

• .jquery

• .yii based

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

• 客户对w3c验证很挑剔

• picturefill解决方案无法验证

• 不同的图片，不仅应该提供不同的图片版本

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

• IE8及以上支持

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

理由：

1. 背景图像技术确实有效，但那些图表不是背景。

2. 他们应该到达服务器端。

3. 显然，他们需要适应。 （和背景大小......好吧......）

4. 最糟糕的是，我们确实拥有与这些信息图相关联的自适应工具提示图像映射。

Answer 1

如果媒体查询不符合您的要求，请使用response.js，如果操作正确，您也可以加载<img>。这是一个例子：

<-- 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" />

Answer 2

您可以使用background-image属性，然后使用媒体查询更改每个视口宽度。

顺便说一句，就W3C验证而言，你可能在HTML5中使用的还没有正式的验证器;）

Answer 3

您可以使用媒体查询。 http://css-tricks.com/css-media-queries/

http://cssmediaqueries.com/

只需将不同的样式应用于容器，然后根据视口大小换出图像。当然，这需要将图像设置为背景，而不是使用img标签。