爱站程序员基地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 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\' />\";//弹出层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 });}});}
