最近使用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的大小做限定,大小即为图片弹出框的大小,这样问题得到了解决,如下图。