现在的位置: 首页 > 综合 > 正文

页面被撑大问题

2013年09月03日 ⁄ 综合 ⁄ 共 4600字 ⁄ 字号 评论关闭

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

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

抱歉!评论已关闭.