layui等比例放大缩小图片

概述HTML <img class="layui-upload-img" id="photo" style="max-height: 100px;max-width: 100px;"> JS $("#photo").click(function(){ showImg($(this));});function showImg(imgData){ var img = new I

HTML

<img  ID="photo" >

Js

$("#photo").click(function(){    showimg($(this));});function showimg(imgData){       var img = new Image();         img.src = imgData.attr("src");       var height = img.height; // 原图片大小       var wIDth = img.wIDth; //原图片大小       var winHeight = $(window).height() - 80;  // 浏览器可视部分高度       var winWIDth = $(window).wIDth() - 100;  // 浏览器可视部分宽度       // 如果图片高度或者宽度大于限定的高度或者宽度则进行等比例尺寸压缩       if (height > winHeight || wIDth > winWIDth) {        // 1.原图片宽高比例 大于等于 图片框宽高比例        if (winWIDth/ winHeight <= wIDth / height) {            wIDth = winWIDth;   //以框的宽度为标准            height = winWIDth * (height / wIDth);        }        // 2.原图片宽高比例 小于 图片框宽高比例        if (winWIDth/ winHeight > wIDth / height) {            wIDth = winHeight  * (wIDth / height);            height = winHeight  ;   //以框的高度为标准        }       }       var imgHTML = "<img src=‘" + img.src + "‘ wIDth=‘" + wIDth + "px‘ height=‘" + height + "px‘ />";         //d出层       layer.open({           type: 1,shade: 0.8,offset: ‘auto‘,// area: [500 + ‘px‘,550+‘px‘],area: [wIDth + ‘px‘,(height + 50) + ‘px‘],//原图显示,高度+50是为了去除掉滚动条           shadeClose:true,scrollbar: false,Title: "图片预览",//不显示标题             content: imgHTML,//捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响             cancel: function () {                 //layer.msg(‘捕获就是从页面已经存在的元素上，包裹layer的结构‘,{ time: 5000,icon: 6 });             }         });}

总结

以上是内存溢出为你收集整理的layui等比例放大/缩小图片全部内容，希望文章能够帮你解决layui等比例放大/缩小图片所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。