這程式碼實現的功能就是平常我們遇到的一個div裡包含img的時候,在img圖片大小未知,div大小未知的情況下,讓圖片自適應大小,對於圖片本身小於div容器大小時,不作處理。因為如果拉伸,圖片可能就失真了。 廢話不多說,直接上代碼,已測試,兼容火狐,谷歌,IE6,IE7/8 以下是js代碼: 複製程式碼 程式碼如下: <BR>window.onload=function (){ <BR>changeImgSize(); <BR>} <BR>function changeImgSize(){ <BR>var getContainer=document.getElementById('imgcontainer'); <BR>var getIMGgetsContainer. )[0]; <BR>var fw=getContainer.offsetWidth-(2*getContainer.clientLeft); <BR>var fh=getContainer.offsetHeight-(2*getContainer.clientTop); <BR>var ioffsetHeight-(2*getContainer.clientTop); <BR>var ioffsetHeight-(2*getContainer.clientTop); <BR>var ioffsetHeight-fidwidth ; <BR>var ih=getIMG.height; <BR>var m=iw/fw; <BR>var n=ih/fh; <BR>if(m>=1&&n<=1) <BR>{ <BR>iw=Math.ceil(iw/m); <BR>ih=Math.ceil(ih/m); <BR>getIMG.width=iw; <BR>getIMG.height=ih; <BR>} <BR>} <BR>} <BR>} >else if(m<=1&&n>=1) <BR>{ <BR>iw=Math.ceil(iw/n); <BR>ih=Math.ceil(ih/n); <BR>getIMG.width =iw; <BR>getIMG.height=ih; <BR>} <BR>else if(m>=1&&n>=1) <BR>{ <BR>getMAX=Math.max(m,n); <BR>iw=Math.ceil(iw/getMAX); <BR>ih=Math.ceil(ih/getMAX); <BR>getIMG.width=iw; <BR>getIMG.height=ih; <BR>} <BR>if(getIMG.height<fh) <BR>{ <BR>var getDistance=Math.floor((fh-getIMG.height)/2); <BR>getIMG.style.marginTop=getDistance.toString() "px "; } } 以下是html代碼: 複製代碼 程式碼如下: 以下是css代碼:複製程式碼 程式碼如下:.sy_pic{ width:200px; height:300px; border:#000 solid 5px; text-align:center;} 自己換下圖片位址使用。有問題或指教請加QQ群:255708401。