2

在这个网站上：

  • .php

  • .jquery

  • 基于.yii

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

  • 客户对 w3c 验证很挑剔

  • 图片填充解决方案不验证

  • 应该提供不同的图像，而不仅仅是不同的图像版本

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

  • IE8 及以上支持

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

原因：

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

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

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

  4. 更糟糕的是，我们确实有与这些信息图表相关的响应式工具提示图像地图。

4

3 回答 3

3

如果媒体查询不是你想要的，那么使用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" />
于 2012-10-06T14:56:04.507 回答
2

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

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

于 2012-10-06T14:29:46.907 回答
1

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

http://cssmediaqueries.com/

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

于 2012-10-06T14:30:25.633 回答