利用CSS和JS控制图片图片自动按比例缩放

作者:shao65308 日期:2013-08-12

字体大小: 小中大

CSS代码：

程序代码

img{max-width: 330px;max-height: 150px;}

由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小。

或者直接间方面强制一个宽度或高度：

程序代码

style="width:auto;height:130px"

JS代码：

程序代码

//图片处理 Begin ===========================================
var flag=false;
function DrawImage(ImgD,w,h){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
  flag=true;
  if(image.width/image.height>= w/h){
    if(image.width>w){
      ImgD.width=w;
      ImgD.height=(image.height*w)/image.width;
    }else{
      ImgD.width=image.width;
      ImgD.height=image.height;
    }
  }else{
    if(image.height>h){
      ImgD.height=h;
      ImgD.width=(image.width*h)/image.height;
    }else{
      ImgD.width=image.width;
      ImgD.height=image.height;
    }
  }
}
}

//改变图片大小
function resizepic(thispic)
{if(thispic.width>500) thispic.width=500;}
//图片处理 End ===========================================

然后在IMG标签中可以使用该函数：onload="DrawImage(this, 500, 500)"

[本日志由 shao65308 于 2013-10-24 10:17 AM 编辑]