图片覆盖整个网页php,网页图片自适应处理方法

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

第一种方法：

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;

}

}

}

第二种方法：

//图片自动调整的模式，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%';

}

}

}

}

}

第三种办法(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'));

}

});

}

});