程序員經(jīng)常需要為客戶制作產(chǎn)品展示頁(yè)面，由于客戶上傳的圖片格式不同，縮放會(huì)導(dǎo)致失真，所以小編花了一些時(shí)間編寫(xiě)了一個(gè)JS代碼支持圖片的完美縮放的演示，一起跟著錯(cuò)新技術(shù)頻道小編來(lái)了解吧！
?
標(biāo)簽對(duì)，img中不能定義高度或?qū)挾龋缦拢?br>
在CSS中寫(xiě)入代碼：.product_img_div?{width:210px;height:190px;overflow:hidden}
作用是控制圖片載入時(shí)，溢出部分隱藏，這樣就不會(huì)把界面撐得太難看。?>
?
復(fù)制代碼 代碼如下:
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;
????????????}
????????}
????}
}[j].width){>;j++){>
測(cè)試后，圖片大小完美縮放，也解決了在載入時(shí)會(huì)把界面撐得很難看的問(wèn)題。
以上就是JS代碼支持圖片的完美縮放的演示，其實(shí)圖像大小的完美縮放也解決了加載時(shí)界面看起來(lái)難看的問(wèn)題，更多的內(nèi)容請(qǐng)繼續(xù)關(guān)注錯(cuò)新技術(shù)頻道！
?
