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);
        //}
    }
  • 相关阅读:
    一个996程序员的自述:在公司眼里你就是一个工具
    我国为何如此重视编程教育?少儿编程会纳入基础教学吗?
    自学 Python 到什么程度能找到工作,1300+ 条招聘信息告诉你答案
    Book
    BFS
    Word写论文公式输入
    matlab保存超分辨率图
    [转载]有价值的Paper
    Latex作图
    微软企业库5.0学习笔记(七)存储容器的引用
  • 原文地址:https://www.cnblogs.com/Zoe-only/p/4598068.html
Copyright © 2011-2022 走看看