兼容IE6及Firefox的图片自动缩放CSS与JS方案

图片自动缩放方案概述

该功能旨在解决内容页面中图片尺寸过大导致溢出、影响页面美观的问题，提供相应的代码供参考使用。

设定需求：图片宽度width不超过600px，高度height不超过800px。

CSS等比例缩放实现

具体实现代码如下：

 
img{max-width: 600px;max-height: 800px;}

JavaScript兼容IE6处理

由于IE6浏览器不支持CSS中的max-width和max-height属性，因此在IE6环境中需要借助JavaScript脚本来控制图片尺寸。

 
var img_width = img.OffsetWidth;<BR>var img_height = OffsetHeight;
var current_w = (150*img_width)/img_height;
var current_h = (330*img_height)/img_width;
if(img_height>150){
if(img_width>330){
D.css(img,{
width:330 + "px",
height:current_h + "px"
}) 
}else{
D.css(img,{
width:current_w + "px",
height:150 + "px"
}) 
} 
}else{
if(img_width>330){
D.css(img,{
width:330 + "px",
height:current_h + "px"
}) 
}else{
D.css(img,{
width:img_width + "px",
height:img_height + "px"
}) 
} 
} 

【注1：D.css为KISSY.DOM.css，引用的是kissy类库中的DOM方法】

【注2：用javascript来控制图片的尺寸页面必须要等图片完全加载出来，所以代码要包含在window.onload事件中，如果图片加载速度很慢的话，可能会有一个小缺陷】

因此，我们可以结合CSS与JavaScript两种方法共同使用。先通过CSS实现基础缩放，再补充JavaScript代码以兼容IE6。