layui等比例放大/缩小图片

$("#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 });  
           }  
       });
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值