防止表格撐開頁面的方法總結
網頁製作中,防止表格被撐破的總結的4種方法,希望對大家有用!
一、使用<img src="pic.jpg" width="400" height="300">直接固定圖片的大小。
這種方法不會引起頁面顯示的錯亂,但是顯示的圖片經常是變形了的。
[便宜超值網頁設計 www.6000.com.tw]
最不推薦了。
二、使用<img src="pic.jpg" onload="javascript:if(this.width>300){this.resized=true;this.style.width=300;}">
這種方法會在調用圖片的時候,會自動按比例縮小到指定的寬度,不會引起圖片的變形,並且也不會撐破表格,因此就不會引起頁面顯示的錯亂。
但也有一個缺點,如果圖片太大,在顯示圖片過程(下載過程)中,還是會先以圖片原大小顯示,這時就會撐破表格,頁面很難看。當然,當圖片完全顯示之後會自動縮小的。
三、為了防止圖片撐破表格,在上述基礎上,對表格進行限制:
在表格的標籤<table>中加入一些限制代碼,<table width="500" border="0"
align="center" cellpadding="0" cellspacing="0">就可以有效地防止表格被撐開了。
四、更進一步,用滑鼠滾輪可以縮小放大圖片的代碼:
<SCRIPT type=text/javascript> function bbimg(o){ var
zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0)
o.style.zoom=zoom+'%'; return false; } </SCRIPT> 使用方法如下:
<img src="pic.jpg" onmousewheel="return bbimg(this)" onload="javascript:if(this.width>500){this.resized=true;this.style.width=500;}">
也可以用樣式:
img { max-width: 500px; width:expression(this.width > 500 ?
"500px" : this.width) } [便宜超值網頁設計
www.6000.com.tw]
|