導(dǎo)讀:建站文章

圖片自適應(yīng)大小在網(wǎng)頁(yè)平面是一個(gè)長(zhǎng)久的話題 偶就經(jīng)常碰到這方面的問(wèn)題曾經(jīng)用過(guò)JS CSS 等辦法來(lái)解決,但是還是不能很好的解決問(wèn)題,今天偶就來(lái)總結(jié)下 =============================== 我需要解決的圖片自適應(yīng)的條件是 圖片的比例大小 都不同,卻把這圖片放在一個(gè)的方框里,這個(gè)方框可大 可小,按照人的意愿來(lái)設(shè)定這個(gè)方框的比例 現(xiàn)在我要做的是要讓這些圖片自適應(yīng)這個(gè)方框,最長(zhǎng) 不超過(guò)方框的長(zhǎng),最寬不超過(guò)方框的寬 =============================== 下面的方法有些錯(cuò)誤，但大體思路是這樣 +++++++++++++++++++++++++++++++++++ 以下是引用片段： //圖片自適應(yīng)大小并絕對(duì)居中對(duì)齊 //函數(shù) fImgageAuto //方法 讀取原始圖片的長(zhǎng)高,按縮放比率進(jìn)行縮放 //缺點(diǎn) 圖片量大 似乎圖片就圖不完 不能完全顯示 //原因不名,偶估計(jì)是onload太多的原因 function fImageAuto(nID,nMaxWidth,nMaxHeight) { var imageArr=document.getElementById(nID); var imageWidthRate,imgHeightRate; imageWidthRate=imageArr.offsetWidth/nMaxWidth; imageHeightRate=imageArr.offsetHeight/nMaxHeight; if(imageWidthRate >=imageHeightRate) { imageArr.style.width=nMaxWidth+"px"; imageArr.style.height=imageArr.offsetHeight+"px"; imageArr.style.marginTop=(nMaxHeight-imageArr.offsetHeight)/2+"px"; }else if(imageWidthRate imageArr.style.height=nMaxHeight+"px"; imageArr.style.width =imageArr.offsetWidth+"px"; imageArr.style.marginLeft=(nMaxWidth-imageArr.offsetWidth)/2+"px"; } return true; } 上例中我最后都是用 .style 來(lái)確認(rèn)圖片最后的長(zhǎng)寬, 有人認(rèn)為我CSS有點(diǎn)偏激,說(shuō)用.width;.height來(lái)得更直接 +++++++++++++織夢(mèng)后臺(tái)模板+++++++++++++++++++++++++++++++++++++++ 上例BUG: 基本算法錯(cuò)誤,但中心思想沒(méi)有偏離,作用域小,如果網(wǎng)頁(yè)中圖片集有N個(gè) 那就要有N個(gè)JS調(diào)用耗費(fèi)圖片dede手機(jī)模板資源,于是就有了下面的修改 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 以下是引用片段： //圖片自適應(yīng)大小并絕對(duì)居中對(duì)齊 //函數(shù) fImgageAuto //能在同一個(gè)ID下對(duì)單獨(dú)圖片自適應(yīng)外框大小 //Ver 2.1 最后更新07/08/27 by Amilim function fImageAuto(nID,nMaxWidth,nMaxHeight) { var objParentID =document.getElementById(nID); var objImg =objParentID.getElementsByTagName("img"); var nImgNewRate =0; var nImgOldRate =nMaxWidth/nMaxHeight; for (i=0;i nImgNewRate =objImg[i].offsetWidth/objImg[i].offsetHeight; if (nImgNewRate >=nImgOldRate) { objImg[i].style.height =nMaxWidth/nImgNewRate +"px"; objImg[i].style.width =nMaxWidth +"px"; objImg[i].style.marginTop =Math.round((nMaxHeight-nMaxWidth/nImgNewRate)/2) +"px"; }else{ objImg[i].style.width =nMaxHeight*nImgNewRate +"px"; objImg[i].style.height =nMaxHeight +"px"; objImg[i].style.marginLeft =(nMaxWidth-nMaxHeight*nImgNewRate)/2 +"px"; } } }

關(guān)鍵詞標(biāo)簽: 網(wǎng)頁(yè) 自適應(yīng) 大小