当前位置:首页 >> 站长天地 >> 网页制作 >> 内容

网页中防止表格被撑破的方法总结

时间:2010-8-21 15:55:00 栏目:网页制作 点击: 来源:不详

 [网页制作]-本文简要: 网页制作中,防止表格被撑破的总结的4种方法,希望对大家有用!一、使用img src='pic.jpg' width='400' height='300'直接固定图片的大小。这种方法不会引起页面显示的错乱,但是显示的图片经常是变形了的。最不推荐了。二、使用img src='pic.jpg' on...
D6电脑网 (d6pc.com): 网页中防止表格被撑破的方法总结-网页制作

网页制作中,防止表格被撑破的总结的4种方法,希望对大家有用!

一、使用<img src="pic.jpg" width="400" height="300">直接固定图片的大小。

这种方法不会引起页面显示的错乱,但是显示的图片经常是变形了的。

最不推荐了。

二、使用<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)
}




D6电脑网|电脑学习,电脑维修,电脑技术网;
设电脑学习,电脑入门,电脑技术,电脑教程,电脑维修,硬件知识,
网页设计建站,桌面壁纸,主题下载,WIN7下载,常用软件下载等栏目。感谢您的支持!
栏目:网页制作 作者:佚名 来源:不详
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
本类推荐
  • 没有
本类固顶
  • 没有
网友推荐
链接申请
  • D6电脑网(www.d6pc.com) © 2019 版权所有 All Rights Reserved.
  • 本站为纯技术学习交流型网站,部分资源来源网络,仅供学习交流,版权归原作者,本站仅为转载,如有侵犯您的利益请联系我们删除.谢谢!
    关于D6电脑学习网 广告合作 419807867@QQ.COM 联系站长 网站地图 粤ICP备09035016号
  • 摆脱浅薄和低俗的最好办法就是学习,我们加油!D6PC! V3.0