1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

求图片自动缩小的js代码,用以防止图片撑破页面!

本帖由 acai19842006-01-04 发布。版面名称:前端开发

  1. acai1984

    acai1984 New Member

    注册:
    2005-10-29
    帖子:
    17
    赞:
    0
    要求如果图片超出宽度就自动缩小到指定宽度!
     
  2. zouql

    zouql New Member

    注册:
    2005-11-27
    帖子:
    312
    赞:
    4
    HTML:
    <script language="JavaScript" type="text/JavaScript">
    //改变图片大小
    function resizepic(thispic)
    {
    if(thispic.width>700) thispic.width=700;
    }
    </script>
    
    数字就是要限制的宽度
     
  3. 小叶

    小叶 New Member

    注册:
    2005-09-04
    帖子:
    17,941
    赞:
    33
    楼上也学会了.
     
  4. zouql

    zouql New Member

    注册:
    2005-11-27
    帖子:
    312
    赞:
    4
  5. acai1984

    acai1984 New Member

    注册:
    2005-10-29
    帖子:
    17
    赞:
    0

    我加了,可是没效果啊
     
  6. 365dn

    365dn New Member

    注册:
    2006-01-04
    帖子:
    123
    赞:
    9
    楼下也学会了
     
  7. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    这段代码是需要行为驱动的,并不会在页面加载的时候自动调整。

    :)
     
  8. cc1234

    cc1234 New Member

    注册:
    2005-12-08
    帖子:
    67
    赞:
    0
    那怎么办啊
     
  9. acai1984

    acai1984 New Member

    注册:
    2005-10-29
    帖子:
    17
    赞:
    0

    什么是行为驱动啊?说清楚点好吗?怎么弄啊?
     
  10. cc1234

    cc1234 New Member

    注册:
    2005-12-08
    帖子:
    67
    赞:
    0



    试试这个,测试没有问题,自动缩小
     
  11. 风

    New Member

    注册:
    2005-09-05
    帖子:
    145
    赞:
    0
    也就是说需要一个行为来调用 resizepic() 函数,诸如点击按钮、页面加载等等。

    cc1234 的代码理论上不错,但是对文档中所有的图像都起作用了,这样就不行了。

    如果是诸如论坛帖子中的图片,我们可以将其加上一个 class 属性,这样针对具有指定的 class 属性的图片改变大小。

    例如 class="postImg"

    PHP:
    <script language="javascript" type="text/javascript">
    //改变图片大小
    function resizepic() {
        for (var 
    i=0i<document.images.lengthi++) {
            if (
    document.images[i].className == "postImg" && document.images[i].width 350) {
                
    document.images[i].width 350;
            }
        }
    }
    </
    script>
    在 <body> 中通过 onload 加载:
    HTML:
    <body onload="resizepic();">
     
    #11 , 2006-01-04
    最后编辑: 2006-01-04
  12. 风

    New Member

    注册:
    2005-09-05
    帖子:
    145
    赞:
    0
    另外一篇帖子中,有人已经收集了相关代码:

    .经常看到一些图片很大,上传后显示会撑满屏幕下面的例子通过检测if(this.width>screen.width-350)then(this.width=screen.width-350)如果该图片的宽度大于“屏幕宽度-350”,则让该图就显示“屏幕宽度-350”这么大小。

    原图

    HTML:
    <img src="jsimg/wallpaper.jpg">
    设定大小的图

    HTML:
    <img src="jsimg/wallpaper.jpg" onload="javascript:if(this.width>screen.width-350) this.width=screen.width-350">
     
  13. cc1234

    cc1234 New Member

    注册:
    2005-12-08
    帖子:
    67
    赞:
    0
    行是行了 还是不够好 呵呵
     
  14. zouql

    zouql New Member

    注册:
    2005-11-27
    帖子:
    312
    赞:
    4
    例如宽度比560大的自动变为560,应该不能再简单了吧
    PHP:
    <script language="JavaScript" type="text/JavaScript">
    //改变图片大小
    function resizepic(thispic)
    {
    if(
    thispic.width>560thispic.width=560;
    }
    </
    script>
    图片后加入:onload=javascript:resizepic(this)
    PHP:
    <IMG src="/test.jpg" onload=javascript:resizepic(this) >
     
    #14 zouql, 2006-01-05
    最后编辑: 2006-01-05
  15. acai1984

    acai1984 New Member

    注册:
    2005-10-29
    帖子:
    17
    赞:
    0