一、使用CSS实现图片的自适应
使用CSS实现图片自适应很简单，主要靠两个参数来完成，分别是max-width和max-height，这两个参数在FIREFOX和IE7以上支持都很好，但是在IE6上面，效果非常糟糕，尤其是对于多张图片的显示，第一次显示网页大都很难达到图片自适应的效果，一般都是有些能自适应，有些不能自适应，多次刷新可能又显示OK，就是这点就足够烦人，而且一旦显示多张图片，IE 6上就卡的要命（expression在IE上比较占用资源，感觉设计是用来玩得，FIREFOX自适应效果还是比较好，速度也非常快），反正笔者至今是没有找到更好的CSS方法来让IE 6完美支持图片自适应。示例代码如下：
| 代码如下 | 复制代码 |
| img{ max-width: 128px; max-height: 128px; height:auto; zoom:expression( function(e) { if(e.width>e.height) {if (e.width>128) { e.height = e.height*(128 /e.width); e.width=128; }} else {if (e.height>128) { e.width = e.width*(128 /e.height); e.height=128; }} e.style.zoom = '1'; }(this)); overflow:hidden; } |
|
上面代码格式上需要特别注意两点：
1、zoom属性里宽高赋值不能带单位（如px），否则无效；
2、if和else语句也必须带大括号括起来，单句指令也不行（而在很多编程语言里，单句指令可以无需大括号）；
二、使用Javascript实现的图片自适应
使用Javascript自适应相对来说比较方便，唯一的麻烦是就是在网页中需要对image预设置onload事件处理resize()函数，如果对于动态网页来说还好一点，反正是动态的，程序里加上去就OK了，可是如果对于很多篇文章而言，在里头增加onload函数有点麻烦，除非一次性的写个脚本批量处理，否则后期更改或替换起来还是比较麻烦，比如图片的可显示宽度变化等等。
另一方面如果把宽度值写在Javascript中，那么将带来程序的通用性降低，下面的示例不是写死的，已测试效果比起CSS要HAPPY的多，网上也又很多类似的例子，不是不完成就是中间还存在某些问题，本文的例子应该会更好一点，笔者对不同的尺寸下的图片的显示效果做过好几种测试了。示例如下：
| 代码如下 | 复制代码 |
| //RESIZE 图片自适应图片宽度和高度 //参数说明： // obj是图片对象，this调用方法见下面示例 // maxW和maxH分别为约定的最大宽度和最大高度 function resizeimg(obj,maxW,maxH) { var imgW=obj.width; var imgH=obj.height; if(imgW>maxW||imgH>maxH) { var ratioA=imgW/maxW; var ratioB=imgH/maxH; if(ratioA>ratioB) { imgW=maxW; imgH=maxW*(imgH/imgW); } else { imgH=maxH; imgW=maxH*(imgW/imgH); } obj.width=imgW; obj.height=imgH; } } |
|
上例的使用示例
| 代码如下 | 复制代码 |
| ：<img src="logo.gif" onload="resizeimg(this,600,1024);"/> | |
我们在制定宽度和高度值的时候，一般宽度是肯定需要限定，而高度经常不需要限制，所以可以把高度指定的大一点，如果高度也限制，那么相当于制定一个image box，下面的程序或许对您很有用（不限制图片高度的忽略下面这个示例）。
当指定图片BOX的时候，一般都还需要在图片自适应之后显示在BOX容器的中间，也就是水平和垂直都需要居中。首先需要指定BOX容器的宽度和高度，然后可以使用CSS来控制显示效果，也可以使用Javascript控制显示效果。示例如下：
IMAGE BOX容器：
| 代码如下 | 复制代码 |
|
<div id="imgbox" style="width:800px;height:800px;border:1px solid #CCCCCC"> <img src="..." onload="resizeimg(this,600,600)"/> </div> |
|
CSS显示方法如下：
| 代码如下 | 复制代码 |
|
#imgbox {text-align:center;vertical-align:middle;} #imgbox img {vertical-align:middle;} |
|
或使用Javascript完成：
在上文resizeimg()函数里最后只需要增加类似这样的语句，
| 代码如下 | 复制代码 |
| obj.style.margin-left=(800-imgW)/2; obj.style.margin-top=(800-imgH)/2; |
|