首页 > 编程语言 > 详细

javascript自动适应图片大小

时间:2015-06-24 18:02:18      阅读:226      评论:0      收藏:0      [点我收藏+]

博客来源 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);
技术分享    //}
技术分享}

javascript自动适应图片大小

原文:http://www.cnblogs.com/Zoe-only/p/4598068.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!