在公司的工作經常要為客戶作產品展示的頁面，由于客戶上傳的圖片格式大小不一，縮放后會導致變形，于是在星期天抽了點時間，寫了一段JS代碼，支持圖片的完美縮放。
首先給圖片加個標簽對，img中不能定義高度或寬度，如下：
在CSS中寫入代碼：.product_img_div {width:210px;height:190px;overflow:hidden}
作用是控制圖片載入時，溢出部分隱藏，這樣就不會把界面撐得太難看。
代碼如下:
ReSizeImg("product_img",200,180);
function ReSizeImg(cName,w,h){
var reImgs = document.getElementsByTagName("img");
for (j=0;j if (reImgs[j].className==cName && (reImgs[j].height>h || reImgs[j].width>w)) {
if (reImgs[j].height==reImgs[j].width) {
reImgs[j].height=h;reImgs[j].width=w;
} else if (reImgs[j].height>reImgs[j].width) {
reImgs[j].height=h;
} else if (reImgs[j].height reImgs[j].width=w;
}
}
}
}

測試后，圖片大小完美縮放，也解決了在載入時會把界面撐得很難看的問題。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com