案例僅為圖片預覽功能，省略圖片上傳步驟，框架為easyui。

HTML代碼：

@*text-align:center;水平居中 vertical-align: middle;display: table-cell;垂直居中*@ <div id="img-dialog" style="text-align:center;vertical-align: middle;display: table-cell;padding:5px;"><img id="showImg" /> </div><a href="javascript:void(0)" id="btnShow" onclick="showImga()"></a>

?JS代碼：

//圖片預覽 function showImga() {//顯示圖片$("#showImg").attr("src", "../UploadFile/Images/圖片.png");var img = new Image();img.src = $('#showImg').attr("src");var w = img.width; //獲取圖片實際寬度var h = img.height;var objImg = $("#showImg")[0];var maxWidth = 500;var maxHeight = 500;autoResizable(w, h, maxWidth, maxHeight, objImg);$('#img-dialog').dialog({title: '圖片預覽',width: maxWidth,height: maxHeight,resizable: true, //設置窗體大小可拖動onResize: function (width, height) { //窗體大小發生改變時觸發//這里為了顯示完整圖片，需減去easyui本身彈框dialog邊框所占高度autoResizable(w, h, width - 25, height - 35, objImg);}}); }//自動調整圖片大小 //參數：圖片寬度，圖片高度，窗體寬度，窗體高度，圖片對象 function autoResizable(w, h, maxWidth, maxHeight, objImg) {var hRatio;var wRatio;var Ratio = 1;wRatio = maxWidth / w;hRatio = maxHeight / h;if (maxWidth == 0 && maxHeight == 0) {Ratio = 1;} else if (maxWidth == 0) {if (hRatio < 1) Ratio = hRatio;} else if (maxHeight == 0) {if (wRatio < 1) Ratio = wRatio;} else if (wRatio < 1 || hRatio < 1) {Ratio = (wRatio <= hRatio ? wRatio : hRatio);}if (Ratio < 1) {w = w * Ratio;h = h * Ratio;}objImg.style.height = Math.round(h) + "px";objImg.style.width = Math.round(w) + "px"; }

?最終效果圖：

轉載于:https://www.cnblogs.com/mu1516633121/p/7646324.html

總結

以上是生活随笔為你收集整理的JS实现图片预览与等比缩放的全部內容，希望文章能夠幫你解決所遇到的問題。

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