图片显示中自动调整尺寸

由用户上传的图片尺寸，我们基本上只规定其总大小，而对图片的长宽不做限制，这就导致了图片的显示时候大小不能按照设计的格式显示，出现这种情况的时候，我们可以用样式来控制

但是样式来调控，出现中情况，就是图片第一次加载的时候，总是显示的很小，再刷新显示又正常，为了解决这个问题，我们可以使用JS来控制图片的尺寸。

 

<script language="javascript" type="text/javascript">
        function sizeImg(obj,width,height)
        {
            if((obj.width/width)>(obj.height/height)){obj.width=width;}
            else{obj.height=height;}
        }
        
        function sizeContainerImg(txtContainerID)
        {
            var container = document.getElementById(txtContainerID);
            var imgs = container.getElementsByTagName("img");
            for(var i=0;i<imgs.length;i++)
            {
                if(container.clientWidth<imgs[i].width)
                {
                    imgs[i].width = container.clientWidth - 2;
                }
            }
        }
    </script>

 

 

<style type="text/css">
        .content{width:500px;overflow:hidden;border:solid 1px #ccc;word-wrap:break-word;word-break:normal;}
    </style>

 

我们在样式中定义了word-wrap和word-break只要是为了显示内容区域文字字段换行的问题

 

body onload="sizeContainerImg('content')">
    <form id="form1" runat="server">
    <div>
       <img src="/images/pic01.jpg" alt="" onload="sizeImg(this,100,100);" />
       <img src="/images/pic01.jpg" alt="" onload="sizeImg(this,110,110);" />
       <img src="/images/pic01.jpg" alt="" onload="sizeImg(this,120,120);" />
       <img src="/images/pic01.jpg" alt="" onload="sizeImg(this,130,130);" />
       <img src="/images/pic01.jpg" alt="" onload="sizeImg(this,140,140);" />
    </div>
    
    <div id="content" class="content">
        asdfasdf<img src="/images/pic01.jpg" alt="" />
        adfasdf
        <img src="/images/1.jpg" alt="" />asdf
        adasdf<img src="/images/2.jpg" alt="" />adfasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
        <img src="/images/3.jpg" alt="" />asdfasdf
    </div>
    
    </form>
</body>