欢 迎 光 临 数据载入中,请稍候......'s BLog
数据载入中,请稍候......
这就是我
数据载入中,请稍候......
用户登陆
数据载入中,请稍候......
最新公告
数据载入中,请稍候......
站点日历
数据载入中,请稍候......
最新日志
数据载入中,请稍候......
最新回复
数据载入中,请稍候......
最新留言
数据载入中,请稍候......
 日志搜索

友情链接
其他信息


·图片太大撑破了表格?      -|cloudy 发表于 2006-10-16 14:04:00
经常设计网页的时候,调用的图片是不确定的,不知道它的高度和宽度。

一、使用<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" style="TABLE-LAYOUT: fixed; WORD-BREAK: break-all">就可以有效地防止表格被撑开了。

四、更进一步,用鼠标滚轮可以缩小放大图片的代码:
<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;}">
[阅读全文 | 回复(3) | 引用通告 | 编辑]

  • 标签:asp 
  • ·Re:图片太大撑破了表格?     -|cloudy发表评论于2006-10-20 16:42:48
    cloudy表格的折行处理.

    <table style="TABLE-LAYOUT: fixed" width="200" border="0" cellspacing="0" cellpadding="7" bgcolor="#f7f7f7">
    <tr>
    <td style="LEFT: 0px; WIDTH: 100%; WORD-WRAP: break-word">
    dffadfdaqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqsfdffadfdasfdffadfdasfdffadfdasfdffadfdasfdffadfdasfdffadfdasfdffadfdasfdffadfdasfdffadfdasf
    </td>
    </tr>
    </table>

    此处主要是用css样式进行控制在<table>标签中有个style="TABLE-LAYOUT: fixed",其说明如下

    语法:

    table-layout : auto | fixed

    参数:

    auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
    fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关,此时在<td>标签中如果没有WORD-WRAP: break-word样式,表格中的内容将只能显示一部份,具体看表格的宽度了.word-wrap说明如下:

    语法:

    word-wrap : normal | break-word

    参数:

    normal :  允许内容顶开指定的容器边界
    break-word :  内容将在边界内换行。如果需要,词内换行(word-break)也会发生
    [个人主页 | 引用 | 返回 | 删除 | 回复]

    ·Re:图片太大撑破了表格?     -|ASFD(游客)发表评论于2006-10-27 18:31:48
    ASFD(游客)楼上的上面的只能对文字有效,对图片有效吗????????????????????????????????????
    [个人主页 | 引用 | 返回 | 删除 | 回复]

    ·Re:图片太大撑破了表格?     -|cloudy发表评论于2006-10-27 23:44:40
    cloudy图片请参照楼主文中(三)处理
    [个人主页 | 引用 | 返回 | 删除 | 回复]

    发表评论:
    数据载入中,请稍候......