zoukankan      html  css  js  c++  java
  • javascript自动适应图片大小

    博客来源 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);
        //}
    }
  • 相关阅读:
    单词接龙
    字符串,字符数组
    马的遍历
    约瑟夫问题
    扫雷游戏
    寻找道路
    传纸条
    数的划分
    火柴棒等式
    火星人
  • 原文地址:https://www.cnblogs.com/Zoe-only/p/4598068.html
Copyright © 2011-2022 走看看