導讀:建站文章

圖片自適應大小在網(wǎng)頁平面是一個長久的話題 偶就經(jīng)常碰到這方面的問題曾經(jīng)用過JS CSS 等辦法來解決,但是還是不能很好的解決問題,今天偶就來總結下 =============================== 我需要解決的圖片自適應的條件是 圖片的比例大小 都不同,卻把這圖片放在一個的方框里,這個方框可大 可小,按照人的意愿來設定這個方框的比例 現(xiàn)在我要做的是要讓這些圖片自適應這個方框,最長 不超過方框的長,最寬不超過方框的寬 =============================== 下面的方法有些錯誤，但大體思路是這樣 +++++++++++++++++++++++++++++++++++ 以下是引用片段： //圖片自適應大小并絕對居中對齊 //函數(shù) fImgageAuto //方法 讀取原始圖片的長高,按縮放比率進行縮放 //缺點 圖片量大 似乎圖片就圖不完 不能完全顯示 //原因不名,偶估計是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 來確認圖片最后的長寬, 有人認為我CSS有點偏激,說用.width;.height來得更直接 +++++++++++++織夢后臺模板+++++++++++++++++++++++++++++++++++++++ 上例BUG: 基本算法錯誤,但中心思想沒有偏離,作用域小,如果網(wǎng)頁中圖片集有N個 那就要有N個JS調(diào)用耗費圖片dede手機模板資源,于是就有了下面的修改 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 以下是引用片段： //圖片自適應大小并絕對居中對齊 //函數(shù) fImgageAuto //能在同一個ID下對單獨圖片自適應外框大小 //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"; } } }

關鍵詞標簽: 網(wǎng)頁 自適應 大小