解决网站页面被撑大的问题

 解决网站页面被撑大的问题

一.保证原图片长高比例,且不超过最大高度或宽度

 

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事件如下:

其中165,176,则为强制最大宽度及高度.

 

二.

script language="JavaScript">

 

 

图片使用的地方:

width="180" height="110"  注意这里最好限定,如果不限定加载图时会成原大,然后再缩小,这个过程如果图大了很难看的.这里是宽度和高度,在前面的JS里改,这里也作相应的改.

 

图不会变形,只会按比列缩,放心

 

三.

在制作页面，添加资料的时候，可能会遇到这种情况，客户提供的表格数据太宽，把页面撑开了，我也遇到这样的问题，当我尽量给表格减肥，发现还是不行的时候，偶忽然想到了overflow:auto，这个属性。

 

　　在这个大的数据表格外面套一个div，class是box，页面源码

 

......

 

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、直接在网页里设置图片大小，比如代码：，这样虽然可以限制了图片大小，但是需要在上传图片之前手动修改图片大小，否则上传的图片就会变形。

 

2、使用如下代码：

 

这种方法会在调用图片的时候，自动按比例缩小到指定的宽度，不会引起图片的变形，并且也不会撑破表格，但是缺点是，如果图片太大，在图片下载过程中，也就是图片显示过程中，会先以图片原大小显示，这时就会撑破表格，页面很难看，二当图片完全显示后，图片又会自动缩小。

 

3、我们可以针对表格的属性来限制大小防止被撑开，比如在

里添加代码“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，页面源码

 

......

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的属性就可以了。