|zyciis| 如何写一条JS来控制网页的所有图片的宽和高不能超过指定的高宽度 谢谢

如，有一个用户留言的功能是可以写html代码的
当用户写一个大的图片的时候
提交后显示出来就会把网页结构撑坏
所以我想有一个JS功能
用控制图片在网页中显示最大高和宽为指定高宽，
如果大于的话就自动进行等比例缩放谢谢

解决方案 »

  1.   

    使用var img = new Image(); img.src = "http://...."; 
    img.width、img.height就为图片的宽高，通过计算比例确定图片在页面中的高宽,再将这个高宽加到
    <img height="" width="" src="http://......">中的参数中
      

  2.   

    先隐藏防止闪动
    <script>
    window.onload=function()
    {
        var maxHeight = 100;
        var maxWith = 100;
        var imags = document.getElementById("container").getElementsByTagName("img");
        
        for(var i=0;i<imags.length;i++)
        {
            var h = imags[i].offsetHeight;
            var w = imags[i].offsetWidth;
            while(h>maxHeight || w>maxWith)
            {
                h*=0.9;
                w*=0.9;
            }
            
            imags[i].style.height=Math.ceil(h)+"px";
            imags[i].style.width=Math.ceil(w)+"px";
            imags[i].style.visibility="visible";
        }
    }
    </script>
    <div id="container">
    <img src="http://www.csdn.net/Images/logo_csdn.gif" style="visibility:hidden" />
    <img src="http://homeimg.focus.cn/photo/2104684/包.jpg" style="visibility:hidden" />
    </div>
      

  3.   

    小的图不变，大的图变小。
    楼上的基本可以实现功能了，只是应用的时候麻烦些，
    建议采用css，调用htc的模式处理，这样只需要对需要有此要求的img，设置class就是了
      

  4.   

       <script type="text/javascript">   function test(){
    var img=document.getElementById("img1");
    var width1=380;//页面规定的最大宽度
    var height1=550;//页面规定的最大高度
    var a=img.width/img.height;//用户提交图片的比例
    var b=width1/height1;//页面规定图片的比例
    //如果用户提交的图片超过最大宽度或者最大高度,按用户提交的比例进行缩小
    if(width1<img.width||height1<img.height1){
    if(a>b){
    img.width=width1;
    img.height=width1/a;
    }else{
    img.height=height1;
    img.width=height1*a;
    }
    }
       }
        </script> 
    <BODY background="top_kb30.gif" onload="test()"> <BR> 
    <img id="img1" src="Photo2008924110360.jpg" />
    </BODY>