您的位置：首页 → 资讯 → 教你一招 → 防止大图片撑裂网页布局的解决方法

防止大图片撑裂网页布局的解决方法

时间：2010/8/11 15:24:23来源：本站整理作者：佚名我要评论(0)

防止大图片撑裂网页布局的解决方法

用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; 指将超出设置大小的部分隐藏，避免控制图片大小失败而引起的表格撑开变形。

也可以针对表格的属性来限制大小防止被撑开，比如在<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;
}

总结一下最实用的代码：
如果是表格，请用：
table {
table-layout: fixed;
word-break: break-all;
}
如果是div层，请用：
div {
table-layout: fixed;
word-wrap: break-word;
width: 加上宽度;
overflow: hidden; (让多出来的不显示。)
}

或者：

<IMG onclick="if(this.width>screen.width-501) window.open('/a.gif');" src="/a.gif" onload="if(this.width>screen.width-500)this.width=screen.width-500" border=0>

 

相关阅读 如何利用ASP把图片上传到数据库在Windows 98中预览大量图片用纯ASP代码实现图片上传数据库中图片存储及读取JSP生成jpeg图片用于投票如何用正则解析图片地址用PHP和MySQL保存和输出图片ActiveContent3内容系统常见问题-关于图片处理

文章评论

查看所有0条评论>>

发表评论

我来说两句...

提交评论