您好,登錄后才能下訂單哦!
這篇文章主要講解了“如何利用layui等比例放大或縮小圖片”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“如何利用layui等比例放大或縮小圖片”吧!
HTML
<img class="layui-upload-img" id="photo" >
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; // 瀏覽器可視部分寬度 // 如果圖片高度或者寬度大于限定的高度或者寬度則進(jìn)行等比例尺寸壓縮 if (height > winHeight || width > winWidth) { // 1.原圖片寬高比例 大于等于 圖片框?qū)捀弑壤? if (winWidth/ winHeight <= width / height) { width = winWidth; //以框的寬度為標(biāo)準(zhǔn) height = winWidth * (height / width); } // 2.原圖片寬高比例 小于 圖片框?qū)捀弑壤? if (winWidth/ winHeight > width / height) { width = winHeight * (width / height); height = winHeight ; //以框的高度為標(biāo)準(zhǔn) } } 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: "圖片預(yù)覽", //不顯示標(biāo)題 content: imgHtml, //捕獲的元素,注意:最好該指定的元素要存放在body最外層,否則可能被其它的相對元素所影響 cancel: function () { //layer.msg('捕獲就是從頁面已經(jīng)存在的元素上,包裹layer的結(jié)構(gòu)', { time: 5000, icon: 6 }); } }); }
感謝各位的閱讀,以上就是“如何利用layui等比例放大或縮小圖片”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對如何利用layui等比例放大或縮小圖片這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。