博客来源 http://blog.csdn.net/eduxh/article/details/1906246
//图片自适应大小
//id为img控件的id
//width与height为img父控件的宽高——即img的最大宽高
//示例:<img id="dd" src="ee.jpg" onload="imgFit('dd',100,200)" />"
function imgFit(id,width,height)
{
var imageArr=document.getElementById(id);
if(imageArr.offsetWidth>width || imageArr.offsetHeight>height)
{
imageRate1=parseInt(imageArr.offsetWidth)/width;
imageRate2=parseInt(imageArr.offsetHeight)/height;
if(imageRate2>imageRate1)
imageArr.style.height = imageArr.offsetHeight/imageRate2+"px";
else
imageArr.style.width = imageArr.offsetWidth/imageRate1 +"px";
}
}
添加居中处理:
function imgFit(imageArr,width,height)
{
//var imageArr=document.getElementById(id);
//if(imageArr.offsetWidth>width || imageArr.offsetHeight>height)
//{
//alert(imageArr.style.marginTop);
sWidth=imageArr.offsetWidth;
sHeight=imageArr.offsetHeight;
imageRate1=parseInt(imageArr.offsetWidth)/width;
imageRate2=parseInt(imageArr.offsetHeight)/height;
if(imageRate2>imageRate1)
{
imageArr.style.height = sHeight/imageRate2+"px";
imageArr.style.marginLeft=(width-sWidth/imageRate2)/2+"px";
}
else
{
imageArr.style.width = sWidth/imageRate1 +"px";
imageArr.style.marginTop=(height-sHeight/imageRate1)/2+"px";
}
//alert(imageArr.offsetWidth+":"+imageArr.offsetHeight);
//}
}
{
//var imageArr=document.getElementById(id);
//if(imageArr.offsetWidth>width || imageArr.offsetHeight>height)
//{
//alert(imageArr.style.marginTop);
sWidth=imageArr.offsetWidth;
sHeight=imageArr.offsetHeight;
imageRate1=parseInt(imageArr.offsetWidth)/width;
imageRate2=parseInt(imageArr.offsetHeight)/height;
if(imageRate2>imageRate1)
{
imageArr.style.height = sHeight/imageRate2+"px";
imageArr.style.marginLeft=(width-sWidth/imageRate2)/2+"px";
}
else
{
imageArr.style.width = sWidth/imageRate1 +"px";
imageArr.style.marginTop=(height-sHeight/imageRate1)/2+"px";
}
//alert(imageArr.offsetWidth+":"+imageArr.offsetHeight);
//}
}