在我們實(shí)際網(wǎng)站制作過(guò)程中，很多客戶在使用網(wǎng)站后臺(tái)時(shí)沒(méi)有學(xué)過(guò)專業(yè)的知識(shí)，很多客戶在未處理的情況下，直接上傳數(shù)碼相機(jī)中拍攝的照片。這樣當(dāng)圖片尺寸較大時(shí)，如果按照真實(shí)的比例去顯示網(wǎng)頁(yè)布局可能會(huì)出現(xiàn)錯(cuò)位的現(xiàn)象，我們可以使用JS代碼實(shí)現(xiàn)當(dāng)圖片寬度超過(guò)一定的尺寸后自動(dòng)收縮。
易天js代碼之：使用JS實(shí)現(xiàn)圖片超過(guò)指定的寬度自動(dòng)收縮成設(shè)定的寬度
在此之前需要將圖片所在的容器的ID設(shè)置為hcimg如
XML/HTML代碼
- <table id=hcimg><tr><td>此處寫處圖片td><tr>table>
JavaScript代碼
- <script language="javascript" type="text/javascript">
- window.onload=function()
- {
- var imgWidthToLimit=580; //對(duì)圖片的限制寬度
- var imgCongObj = hcimg.getElementsByTagName("IMG"); //獲取id為hcimg的頁(yè)面容器（div、table等）中的所有img對(duì)象
- for( i=0;i<imgCongObj.length;i++)
- {
- var image = new Image();
- image.src=imgCongObj[i].src;
- image.i=i;
- image.onreadystatechange=function(){
- if (image.readyState=="complete") {
- var w= parseInt(image.width);
- if(w>imgWidthToLimit) imgCongObj[this.i].width=imgWidthToLimit;
- }
- }
- }
- }
- </script>
- 或
- <div id=hcimg>此處寫上圖片代碼div>
