网页图片自适应处理方法

本文总结了三种网页图片自适应处理方法，具体解决办法如下：

第一种方法：

<img src="01.gif"  width="100" onload="drawImage(this,100,70)" />

function drawImage(ImgD,ImgDWidth,ImgDHeight){
    var image=new Image();
    image.src=ImgD.src;
    if(image.width/image.height>=ImgDWidth/ImgDHeight){
        if(image.width>ImgDWidth){
            ImgD.width=ImgDWidth;
            ImgD.height=(image.height*ImgDWidth)/image.width;
        }
        else{
            ImgD.width=image.width;
            ImgD.height=image.height;
        }
    }
    else{
        if(image.height>ImgDHeight){
            ImgD.width=(image.width*ImgDHeight)/image.height;
            ImgD.height=ImgDHeight;
        }
        else{
            ImgD.width=image.width;
            ImgD.height=image.height;
        }
    }
}

第二种方法：

<img src="http://tech.cncms.com/tech/UploadPic/2011618/2011618143434260.jpg" border="0" onload="return imgzoom(this,550);" style="cursor:pointer;" onclick="javascript:window.open(this.src);" />

<script language="javascript">
//图片自动调整的模式，1为按比例调整 ，2 按大小调整。
var resizemode=1
function imgresize(o){
    if(resizemode==2 || o.onmousewheel){
        if(o.width > 500 ){
            o.style.width='500px';
        }
        if(o.height > 800){
            o.style.height='800px';
        }
    }else{
        var parentNode=o.parentNode.parentNode;
        if(parentNode){
            if(o.offsetWidth>=parentNode.offsetWidth){
                o.style.width='98%';
            }
        }else{
            var parentNode=o.parentNode
            if(parentNode){
                if(o.offsetWidth>=parentNode.offsetWidth){
                    o.style.width='98%';
                }
            }
        }
    }
}
</script>

 第三种办法（Jquery解决的），关键代码如下：

$('#ac_content img').each(function(){
    appropriate_width=300;
    if($(this).width()>appropriate_width){
        $(this).css({'width':appropriate_width+'px','height':$(this).height()*appropriate_width/$(this).width()+'px'});
        $(this).attr('title','点击查看大图片');
        $(this).bind({
            click:function(){
                window.open($(this).attr('src'));
            }
        });
    }
});