• 技术文章 >web前端 >js教程

    js 等比例缩放图片

    大家讲道理大家讲道理2016-11-10 13:24:06原创487
    //第一个参数是当前对象this,第二个是宽,第三个是高
     
    function datuIMG(datu,kuan,chang){
    datu.width = kuan*100;
    datu.height = chang*100;
    //图片等比例缩小
    if(datu.width*chang>datu.height*kuan){
    datu.width=kuan;
    datu.height=(kuan*chang)/kuan;
    }
    else{ 
    datu.width=(chang*kuan)/chang;
    datu.height=chang;
    }
    //图片居中显示
    //图片宽小于设定的边框宽
    if(datu.width<=kuan){
    var kk = parseInt((kuan-datu.width)/2);
    datu.style.paddingRight = kk + "px";
    datu.style.paddingLeft = kk + "px";
    }
    //图片高小于设定的边框高
    if(datu.height<=chang){
    var gg = parseInt((chang-datu.height)/2);
    datu.style.paddingTop = gg + "px";
    datu.style.paddingBottom = gg + "px";
    }
     
    }
     
     
    //使用
     
    在img上写onload事件  onload=" datuIMG(this,100,80)"
     
     
    最终的效果就会将无论多大的图片 等比缩放成 100*80
    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:JS禁用浏览器退格键 下一篇:js+html实现遮罩层效果
    大前端线上培训班

    相关文章推荐

    • 什么是Angular cli?怎么使用?• 浅谈Nodejs中Buffer模块的用法,看看如何编解码二进制数据包• javascript怎么改变元素宽高• Node.js中什么是RPC通信?和Ajax有啥区别?• javascript怎么求1到100的和

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网