頁面被撐大問題

一.保證原圖片長高比例,且不超過最大高度或寬度

function initimg(parpic,maxwidth,maxheight)
{
var scale=maxwidth/maxheight;
var realscale=parpic.width/parpic.height;
if((parpic.width>maxwidth)||(parpic.height>maxheight))
{
if(realscale>scale)
{
parpic.width=maxwidth;
}
else
{
parpic.height=maxheight;
}
}
}

調用方法:
圖片中加onload事件如下:
<img name="carpic" onload="initimg(this,165,176)" src="圖片地址">
其中165,176,則為強制最大寬度及高度.

二.
script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
 flag=true;
 if(image.width/image.height>= 180/110){
  if(image.width>180){
   ImgD.width=180;
   ImgD.height=(image.height*110)/image.width;
  }else{
   ImgD.width=image.width;
   ImgD.height=image.height;
  }
  /*ImgD.alt="bigpic"  */
 }
 else{
  if(image.height>110){
   ImgD.height=110;
   ImgD.width=(image.width*110)/image.height;
  }else{
   ImgD.width=image.width;
   ImgD.height=image.height;
  }
   /*ImgD.alt="bigpic"  */
 }
}
}

//-->
</script>

圖片使用的地方:
<img src="圖片" border=0 width="180" height="110" onload="javascriptrawImage(this);">
width="180" height="110"  注意這裡最好限定,如果不限定載入圖時會成原大,然後再縮小,這個過程如果圖大了很難看的.這裡是寬度和高度,在前面的JS裡改,這裡也作相應的改.

圖不會變形,只會按比列縮,放心

三.
在製作頁面，添加資料的時候，可能會遇到這種情況，客戶提供的表格式資料太寬，把頁面撐開了，我也遇到這樣的問題，當我盡量給表格減肥，發現還是不行的時候，偶忽然想到了overflow:auto，這個屬性。

　　在這個大的資料表格外面套一個div，class是box，頁面源碼

<div class="box">
<table>
......
</table>
</div>

css這樣寫

.box{width:520px; overflow:auto;}

　　css定義了這個div的overflow“auto”的屬性，還有就是要給這個div一個適合這個頁面的寬度。

　　這樣，當“box”裡面的內容寬度大於css定義的寬度時，就會出現捲軸了。裡面的內容可以是表格，也可以是圖片等等。

　　在上上面overflow:auto的問題中，為了不讓內容撐開，我用了

.box{width:520px; overflow:auto;}

　　但是這樣會出現一個問題，就是橫向和豎直捲軸都會出現，因為如果只定義了overflow，豎直捲軸會因為橫向捲軸佔用的空間而一直出現，後來為了隱藏豎直的捲軸，我這樣寫

.box{width:520px; overflow:auto;overfolw-y:hidden;}

　　隱藏了豎直捲軸，問題雖然解決了，但是換個角度去想，為什麼是讓它出現了再隱藏，而不是不讓它出現。查過了蘇沈小雨-樣式表中文手冊以後發現只要定義overfolw-x的屬性就可以了。

.box{width:520px; overfolw-x:auto;}

　　如果不超過所定寬度，不顯示捲軸，超過了寬度只顯示橫向捲軸，因為沒有對豎直滾動overfolw-y定義，所以豎直捲軸也沒有出現。

　　文法：

overflow-x: visible | auto | hidden | scroll

參數：
visible: 不剪下內容也不添加捲軸。假如顯式聲明此預設值，對象將被剪下為包含對象的window或frame的寬度。
auto: 此為body對象和textarea的預設值。在需要時剪下內容並添加捲軸
hidden: 不顯示超過對象寬度的內容
scroll: 總是顯示橫向捲軸

　　overfolw-y與上面overflow-x相似，想要固定垂直高度，出現垂直捲軸的話，只要定義高度和overfolw-y的屬性就可以了。

四.
在我們設計網頁的時候，總會遇到一些不愉快的事情，最常見的莫過於在後台新增內容後才發現顯示的頁面被撐開，導致網頁極度不美觀。以前大家基本上都是設計表格，網上自然不少對於的解決方案，如今還有div+css標準設計，很少看到相關好的方法，現在瀟湘線上把平時找到的防止表格被撐開的好方法總結歸納一下，和大家一起分享。

1、直接在網頁裡設定圖片大小，比如代碼：<img src="/u/info_img/2007-12/31/www.xker.com.jpg" width="600" height="500" border="0">，這樣雖然可以限制了圖片大小，但是需要在上傳圖片之前手動修改圖片大小，否則上傳的圖片就會變形。

2、使用如下代碼：<img src="/u/info_img/2007-12/31/www.xker.com.jpg" onload="javascript:if(this.width>600}{this.resized=true;this.style.width=600;}">

這種方法會在調用圖片的時候，自動按比例縮小到指定的寬度，不會引起圖片的變形，並且也不會撐破表格，但是缺點是，如果圖片太大，在圖片下載過程中，也就是圖片顯示過程中，會先以圖片原大小顯示，這時就會撐破表格，頁面很難看，二當圖片完全顯示後，圖片又會自動縮小。

3、我們可以針對錶格的屬性來限制大小防止被撐開，比如在<table width="600" border="0" cellpadding="0" cellspacing="0">裡添加代碼“style="table-layout:fixed;word-wrap:break-word;word-break;break-all;"”，其中“table-layout:fixed; ”是為了將表格版面配置固定住，就可以有效地防止表格被撐開，“word-wrap:break-word; ”是控制換行的，也就是強制執行換行，這個在常值內容較多的情況下需要使用到，特別是重複的內容出現，不執行換行的話，表格就被撐開了；而“word-break:
break-all; ”可以解決IE的架構被英文（非亞洲語言文本行）撐開的問題，但是不會強制換行，只顯示表格寬度裡的內容。一般情況下只要用到“style="table-layout:fixed;word-wrap:break-word;"”就可以。當然，上面調用的語句可以定義在css裡，比如
table {
table-layout: fixed;
word-wrap:break-word;
}

4、用css控製圖片自適應大小，代碼如：
img {
max-width: 600px;
width:expression(this.width > 600 ? "600px" : this.width);
overflow:hidden;
}
其中 max-width:600px; 在IE7、FireFox等其他非IE瀏覽器下最大寬度為600px，但在IE6中無效；width:600px; 在所有瀏覽器中圖片的大小為600px，當圖片大小大於600px，自動縮小為600px，在IE6中有效；而 overflow:hidden; 指將超出設定大小的部分隱藏，避免控製圖片大小失敗而引起的表格撐開變形。

5、最後總結一下最實用的代碼：
如果是表格，請用：
table {
table-layout: fixed;
word-break: break-all;
}
如果是div層，請用：
div {
table-layout: fixed;
word-wrap: break-word;
width: 加上寬度;
overflow: hidden; (讓多出來的不顯示。)
}

五.
　　在製作頁面，添加資料的時候，可能會遇到這種情況，客戶提供的表格式資料太寬，把頁面撐開了，我也遇到這樣的問題，當我盡量給表格減肥，發現還是不行的時候，偶忽然想到了overflow:auto，這個屬性。

　　在這個大的資料表格外面套一個div，class是box，頁面源碼

<div class="box">
<table>
......
</table>
</div>
css這樣寫

.box{width:520px; overflow:auto;}
　　css定義了這個div的overflow“auto”的屬性，還有就是要給這個div一個適合這個頁面的寬度。

　　這樣，當“box”裡面的內容寬度大於css定義的寬度時，就會出現捲軸了。裡面的內容可以是表格，也可以是圖片等等。

　　在上上面overflow:auto的問題中，為了不讓內容撐開，我用了

.box{width:520px; overflow:auto;}
　　但是這樣會出現一個問題，就是橫向和豎直捲軸都會出現，因為如果只定義了overflow，豎直捲軸會因為橫向捲軸佔用的空間而一直出現，後來為了隱藏豎直的捲軸，我這樣寫

.box{width:520px; overflow:auto;overfolw-y:hidden;}
　　隱藏了豎直捲軸，問題雖然解決了，但是換個角度去想，為什麼是讓它出現了再隱藏，而不是不讓它出現。查過了蘇沈小雨-樣式表中文手冊以後發現只要定義overfolw-x的屬性就可以了。

.box{width:520px; overfolw-x:auto;}
　　如果不超過所定寬度，不顯示捲軸，超過了寬度只顯示橫向捲軸，因為沒有對豎直滾動overfolw-y定義，所以豎直捲軸也沒有出現。

　　文法：

overflow-x: visible | auto | hidden | scroll
 
參數：
visible: 不剪下內容也不添加捲軸。假如顯式聲明此預設值，對象將被剪下為包含對象的window或frame的寬度。
auto: 此為body對象和textarea的預設值。在需要時剪下內容並添加捲軸
hidden: 不顯示超過對象寬度的內容
scroll: 總是顯示橫向捲軸

　　overfolw-y與上面overflow-x相似，想要固定垂直高度，出現垂直捲軸的話，只要定義高度和overfolw-y的屬性就可以了。