您当前的位置:首页 > 网站建设笔记 >

使用Adaptive Images解决方案设置自适应图片

0

实现Adaptive Images解决方案需要Apache 2、PHP 5.x 和GD库,也就是说需要Web服务器端编程。首先,在其网站上下载.zip文件开始配置(也可以点击这里下载):

解压文件,然后将其中的adaptive-images.php和.htaccess文件拷贝到网站的根目录。如果你网站的根目录下已经有一个.htaccess文件了,不要覆盖它。参考下载包中的instructions.htm文件看看怎么做合适。

如果您网站使用的是phpcms系统,那么.htaccess文件在您网站所设置的内容基础上增加以下两条语句,如下图所示:

RewriteCond %{REQUEST_URI} !assets
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

修改htaccess设置自适应图片

接着在网站根目录下创建一个名为ai-cache的文件夹。用你最喜欢的FTP客户端软件设置该文件夹的权限为777。

然后把如下JavaScript代码复制到每个需要自适应图片的网页的头部:

<script type="text/javascript">document.cookie='resolution='+Math.max(screen.width,screen.height)+';path=/';</script>

切记这段JavaScript代码要放在页面头部(最好作为第一个脚本),因为它需要在页面加载完成之前,而且要在发出图片请求之前运行。下面是我的示例网站头部加入该脚本后的结果:

Adaptive Images解决方案

顶部中部底部