帝国论坛帝国网站管理系统交流区帝国CMS使用交流[分享]图片过大撑破表格的福音!JS控制图片大小 【本版专题贴子】  
 1/3     1 2 3 ›› ›|
主题:[分享]图片过大撑破表格的福音!JS控制图片大小 [加入收藏夹]   

小草地
用户头衔:进士

精华贴   :0
发贴数   :1492
经验值   :3591
注册时间:2008-06-01
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 1 楼]
[分享]图片过大撑破表格的福音!JS控制图片大小
在论坛看到很多提问图片过大撑破表格的解决办法,我也曾遇到过,用CSS的最大宽度来控制,可是IE6.0浏览器不支持最大宽度,所以用CSS来控制图片大小也不是十分完美。下面给大家分享两种用JS控制图片大小的方法,全面兼容各种浏览器。


1,不按照比例的缩放 <script language="javascript">
function changeImg(mypic){
    var xw=130;
    var xl=160;
    var width = mypic.width;
    var height = mypic.height;
                     
    if (width > xw ) mypic.width = xw;
    if (height > xl ) mypic.height = xl;
}
</script>
调用方法:
<img src="图片地址" onload="changeImg(this)">   

2,按照比例的缩放
<script language="javascript">
function changeImg(mypic){
    var xw=160;
    var xl=180;
         
    var width = mypic.width;
    var height = mypic.height;
    var bili = width/height;         
         
    var A=xw/width;
    var B=xl/height;
         
    if(!(A>1&&B>1))
    {
        if(A<B)
        {
            mypic.width=xw;
            mypic.height=xw/bili;
        }
        if(A>B)
        {
            mypic.width=xl*bili;
            mypic.height=xl;
        }
    }
}
</script> 调用方法:
<img src="图片地址" onload="changeImg(this)">



帝国演示站:www.97free.com www.joke08.com
2009-06-17 00:20:17 已设置保密 顶部 回复 引用 报告 编辑 删除

huilan
用户头衔:探花

精华贴   :0
发贴数   :3947
经验值   :9790
注册时间:2009-02-04
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 2 楼]

支持 小草地




2009-06-17 10:01:15 已设置保密 顶部 回复 引用 报告 编辑 删除

小草地
用户头衔:进士

精华贴   :0
发贴数   :1492
经验值   :3591
注册时间:2008-06-01
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 3 楼]




帝国演示站:www.97free.com www.joke08.com
2009-06-17 20:13:22 已设置保密 顶部 回复 引用 报告 编辑 删除

sanbaodian
用户头衔:秀才

精华贴   :0
发贴数   :90
经验值   :592
注册时间:2007-04-27
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 4 楼]

小草地的东西很人性化。



http://www.tspl.me

三宝殿|网络第一帮
2009-06-17 20:40:33 已设置保密 顶部 回复 引用 报告 编辑 删除

mysky4u
用户头衔:书生

精华贴   :0
发贴数   :8
经验值   :149
注册时间:2009-02-20
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 5 楼]

那不是每个图片都要自己添加加onload???

那不累死??




2009-06-17 21:44:37 已设置保密 顶部 回复 引用 报告 编辑 删除

rksko
用户头衔:举人

精华贴   :0
发贴数   :257
经验值   :1053
注册时间:2009-05-12
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 6 楼]

ie 6 有 方法  自己找下




2009-06-17 22:02:35 已设置保密 顶部 回复 引用 报告 编辑 删除

小草地
用户头衔:进士

精华贴   :0
发贴数   :1492
经验值   :3591
注册时间:2008-06-01
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 7 楼]

“onload”加在模板里。标签调用图片地址就行了。



帝国演示站:www.97free.com www.joke08.com
2009-06-17 22:40:48 已设置保密 顶部 回复 引用 报告 编辑 删除

mnupx
用户头衔:举人

精华贴   :0
发贴数   :390
经验值   :1051
注册时间:2007-10-23
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 8 楼]

支持




2009-06-18 09:25:52 已设置保密 顶部 回复 引用 报告 编辑 删除

nicacc
用户头衔:举人

精华贴   :0
发贴数   :218
经验值   :692
注册时间:2007-12-27
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 9 楼]

不错




2009-06-20 01:58:15 已设置保密 顶部 回复 引用 报告 编辑 删除

hahaha
用户头衔:进士

精华贴   :0
发贴数   :777
经验值   :2186
注册时间:2008-10-14
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 10 楼]

不错




2009-06-27 00:47:58 已设置保密 顶部 回复 引用 报告 编辑 删除
 1/3     1 2 3 ›› ›|

快速回复
内容

表情
使用EBB代码 使用smile代码 显示签名 自动分析url 自动分析img
     【进入高级模式】   (按 Ctrl+Enter 直接提交)
    顶部  加入收藏夹
关于帝国 | 广告服务 | 联系我们 | 法律声明 | 隐私条款 | 许可协议
Powered by: EBB Version 2.2.1