HTML

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 = "";

//彈出層

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 });

}

});

}

總結

以上是生活随笔為你收集整理的layui 怎么设置点击图片放大_layui等比例放大/缩小图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。