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

【问题标题】：How to deliver different Responsive Images?如何提供不同的响应式图像？
【发布时间】：2012-09-27 11:02:03
【问题描述】：

在这个网站上：

.php
.jquery
基于.yii

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

客户对 w3c 验证很挑剔
图片填充解决方案无法验证
应该提供不同的图像，而不仅仅是不同的图像版本
有很多原因背景图片不是解决方案*
IE8 及以上支持

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

原因：

背景图像技术确实有效，但这些信息图不是背景。
它们应该到达服务器端。
显然，他们需要适应。（还有背景大小……嗯……）
更糟糕的是，我们确实有与这些信息图表相关联的响应式工具提示图像地图。

【问题讨论】：

标签： php jquery mobile yii responsive-design

【解决方案1】：

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

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

【讨论】：

不是我不想要，是我不能拥有。 ;)
我试过了，脚本已加载，但图像似乎没有切换。插入后我应该打电话还是什么？调整大小和 document.ready 后这会起作用吗？
找到了。忘记添加 Response.create 来触发所有事情。干杯。

【解决方案2】：

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

顺便说一句，就 W3C 验证而言，您可能正在使用尚无官方验证器的 HTML5 制作您的网站；)

【讨论】：

如果 Internet Explorer 兼容性存在问题，请使用 filter 属性检查宽度并设置背景图像。（您可以使用条件 cmets hack 使其验证，它只会在 Internet Explorer 上读取）
如果 IE8 和旧版本的兼容性存在问题，另一种可能性是使用 code.google.com/p/css3-mediaqueries-js
我已经更新了我的问题。如果 HTML5 Validator 是官方的，我不会与客户争论。但如果它在 W3C 网站上，我看不出我们能得到多少“官方”。 ;)
如果您尝试他们的 HTML5 验证器，您会收到警告“使用实验功能：HTML5 一致性检查器”。然后它告诉你你没有使用他们的服务，而是validator.nu 所以虽然它在他们的网站上，但它只是为了方便 - 它不是他们的产品;）

【解决方案3】：

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

http://cssmediaqueries.com/

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

【讨论】：

如果媒体查询不可用，Javascript 确实是唯一可行的替代方案。见 Starx 答案。