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);
        //}
    }
  • 相关阅读:
    文件处理seek以及修改内容的两种方式
    三元表达式、列表推导式、生成器表达式、递归、匿名函数、内置函数
    MySQL逻辑查询语句执行顺序
    函数基础
    迭代器、生成器、面向过程编程
    3 函数
    文件处理
    字符编码
    2 数据类型、字符编码、文件处理
    转载文章之提供给开发者 10 款最好的 Python IDE
  • 原文地址:https://www.cnblogs.com/Zoe-only/p/4598068.html
Copyright © 2011-2022 走看看