Recently, when using layer to preview pictures, we encountered a problem. If the size of the picture is larger than the size of the browser, the picture cannot adapt to the screen. Later I saw a blog post: layer picture adaptive window
Original link: https://blog.csdn.net/qazx123q/article/details/82256930
//html structure
<a href="javascript:;" onClick="showImg(this)" data-href="{$vo.src}" ><img src="{$vo.src}" ></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', //No background color shadeClose: true, shade: 0.6, //mask opacity 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); // size pictures 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"]; } // Set layer layer.open(setting); }); } function getImageWidth(url,callback){ var img = new Image(); img.src = url; // If the picture is cached, the cached data will be returned directly if(img.complete){ callback(img.width, img.height); }else{ // Fully loaded events img.onload = function(){ callback(img.width, img.height); } }
But it did not completely solve the problem. The original renderings are
If the picture is too large, the following conditions will occur: scroll wheel
So slightly modify the above code
function showImg(obj){ var url = $(obj).data('href'); var thisimg = $("#img"); var setting = { type: 1, title: false, closeBtn: 0, skin: 'layui-layer-nobg', //No background color shadeClose: true, shade: 0.6, //mask opacity } var windowH = $(window).height(); var windowW = $(window).width(); getImageWidth(url,function(w,h ){ console.log("win:"+windowH+","+windowW); console.log("img:"+h+","+w); // size pictures 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'/>";** } // Set layer layer.open(setting); }); } function getImageWidth(url,callback){ var img = new Image(); img.src = url; // If the picture is cached, the cached data will be returned directly if(img.complete){ callback(img.width, img.height); }else{ // Fully loaded events img.onload = function(){ callback(img.width, img.height); } } }
Limit the size of img by judging the content variable of setting in layer. The size is the size of the picture pop-up box. This problem has been solved, as shown in the following figure.
qq_40258899 Published 2 original articles, praised 0 and visited 14 Private letter follow