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);
        //}
    }
  • 相关阅读:
    v-chart使用的相关实例
    v-chart从后台获取数据
    算法题-单词搜索
    关于前端开发的一些小经验总结
    element的input中加入可点击的按钮
    vue.js的入门
    链表问题(算法题)
    同构词分类
    最长不降序子列的改编(dp数组的使用)
    Ubuntu安装Git
  • 原文地址:https://www.cnblogs.com/Zoe-only/p/4598068.html
Copyright © 2011-2022 走看看