圖片完美縮放_javascript技巧

在公司的工作經(jīng)常要為客戶作產(chǎn)品展示的頁面，由于客戶上傳的圖片格式大小不一，縮放后會導(dǎo)致變形，于是在星期天抽了點(diǎn)時(shí)間，寫了一段JS代碼，支持圖片的完美縮放。
首先給圖片加個(gè)標(biāo)簽對，img中不能定義高度或?qū)挾?，如下?
在CSS中寫入代碼：.product_img_div {width:210px;height:190px;overflow:hidden}
作用是控制圖片載入時(shí)，溢出部分隱藏，這樣就不會把界面撐得太難看。
代碼如下:
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;
}
}
}
}

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

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