這篇文章主要講解了“如何利用layui等比例放大或縮小圖片”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何利用layui等比例放大或縮小圖片”吧！

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(創(chuàng)新互聯(lián)建站).為客戶提供專業(yè)的成都服務(wù)器托管,四川各地服務(wù)器托管,成都服務(wù)器托管、多線服務(wù)器托管.托管咨詢專線：18982081108

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;  // 瀏覽器可視部分寬度

       // 如果圖片高度或者寬度大于限定的高度或者寬度則進行等比例尺寸壓縮
       if (height > winHeight || width > winWidth) {
        // 1.原圖片寬高比例 大于等于 圖片框?qū)捀弑壤?
        if (winWidth/ winHeight <= width / height) {
            width = winWidth;   //以框的寬度為標準
            height = winWidth * (height / width);
        }

        // 2.原圖片寬高比例 小于 圖片框?qū)捀弑壤?
        if (winWidth/ winHeight > width / height) {
            width = winHeight  * (width / height);
            height = winHeight  ;   //以框的高度為標準
        }
       }

       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ù)覽", //不顯示標題  
           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等比例放大或縮小圖片這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

文章標題：如何利用layui等比例放大或縮小圖片
標題路徑：http://aaarwkj.com/article32/pegcpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、域名注冊、品牌網(wǎng)站設(shè)計、網(wǎng)站營銷、企業(yè)建站、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)