使用layer插件实现 图片预览自适应窗口

最近使用layer预览图片的时候遇到了一个问题，假如图片大小大于浏览器大小，则导致图片无法自适应屏幕。后来看到一篇博文：layer图片自适应窗口

原文链接：https://blog.csdn.net/qazx123q/article/details/82256930
//html结构

<a href="javascript:;" onClick="showImg(this)" data-href="{$vo.src}" ><img src="{$vo.src}" class="img-responsive" ></a>
function showImg(obj){
    var url = $(obj).data('href');
    var thisimg = $(obj).siblings().find('img')
    var img = "<img src='" + url + "'  />";
    var setting = {
        type: 1,
        title: false,
        closeBtn: 0,
        skin: 'layui-layer-nobg', //没有背景色
        shadeClose: true,
        shade: 0.6, //遮罩透明度
        content: img
    }
 
    var windowH = $(window).height();
    var windowW = $(window).width();
 
    getImageWidth(url,function(w,h){
        //console.log("win:"+windowH+","+windowW);
        //console.log("img:"+h+","+w);
        // 调整图片大小
        if(w>windowW || h>windowH){
            if(w>windowW && h>windowH){
                w = thisimg .width()*3;
                h = thisimg .height()*3;
                setting.area = [w+"px",h+"px"];
            }else if(w>windowW){
                setting.area = [windowW+"px",windowW*0.5/w*h+"px"];
            }else{
                setting.area = [w+"px",windowH+"px"];
            }
        }else{
            setting.area = [w+"px",h+"px"];
        }
        // 设置layer
        layer.open(setting);
    });
}
 
function getImageWidth(url,callback){
    var img = new Image();
    img.src = url;
 
    // 如果图片被缓存，则直接返回缓存数据
    if(img.complete){
        callback(img.width, img.height);
    }else{
        // 完全加载完毕的事件
        img.onload = function(){
            callback(img.width, img.height);
        }
    }
 

但是并没有完全解决问题，原效果图为

如果图片过大还是会出现如下情况，出现滚轮

所以对上述代码稍加修改

function showImg(obj){
    var url = $(obj).data('href');
    var thisimg = $("#img");
    var setting = {
        type: 1,
        title: false,
        closeBtn: 0,
        skin: 'layui-layer-nobg', //没有背景色
        shadeClose: true,
        shade: 0.6, //遮罩透明度
    }
    var windowH = $(window).height();
    var windowW = $(window).width();
    getImageWidth(url,function(w,h ){
        console.log("win:"+windowH+","+windowW);
        console.log("img:"+h+","+w);
        // 调整图片大小
        if(w>windowW || h>windowH){
            if(w>windowW && h>windowH){
                w = thisimg .width()*3;
                h = thisimg .height()*3;
                setting.area = [w+"px",h+"px"];
				**setting.content = "<img src='" + url + "'   width='" + w + "px' height='" + h + "px' />";**
            }else if(w>windowW){
                setting.area = [windowW+"px",windowW*0.5/w*h+"px"];
				**setting.content = "<img src='" + url + "'   width='" + windowW + "px' height='" + windowW*0.5/w*h + "px'/>";**
            }else{
                setting.area = [w+"px",windowH+"px"];
				**setting.content = "<img src='" + url + "'   width='" + w + "px' height='" + windowH + "px'/>";**
            }
        }else{
            setting.area = [w+"px",h+"px"];
			**setting.content = "<img src='" + url + "'   width='" + w + "px' height='" + h + "px'/>";**
        }
        // 设置layer
        layer.open(setting);
    });
}
 
function getImageWidth(url,callback){
    var img = new Image();
    img.src = url;
 
    // 如果图片被缓存，则直接返回缓存数据
    if(img.complete){
        callback(img.width, img.height);
    }else{
        // 完全加载完毕的事件
        img.onload = function(){
            callback(img.width, img.height);
        }
    }

}

将layer中setting的content变量通过判断条件来对img的大小做限定，大小即为图片弹出框的大小，这样问题得到了解决，如下图。