行业动态
js实现图片超过宽度自动收缩
发布日期:2013-07-25 阅读次数:5800 字体大小:

在我们实际网站制作过程中,很多客户在使用网站后台时没有学过专业的知识,很多客户在未处理的情况下,直接上传数码相机中拍摄的照片。这样当图片尺寸较大时,如果按照真实的比例去显示网页布局可能会出现错位的现象,我们可以使用JS代码实现当图片宽度超过一定的尺寸后自动收缩。

易天js代码之:使用JS实现图片超过指定的宽度自动收缩成设定的宽度

在此之前需要将图片所在的容器的ID设置为hcimg如

XML/HTML代码
  1. <table id=hcimg><tr><td>此处写处图片td><tr>table>  

     

    JavaScript代码
    1. <script language="javascript" type="text/javascript">       
    2. window.onload=function()       
    3. {       
    4. var imgWidthToLimit=580; //对图片的限制宽度       
    5. var imgCongObj = hcimg.getElementsByTagName("IMG"); //获取id为hcimg的页面容器(div、table等)中的所有img对象       
    6. for( i=0;i<imgCongObj.length;i++)       
    7. {       
    8. var image = new Image();       
    9. image.src=imgCongObj[i].src;       
    10. image.i=i;       
    11. image.onreadystatechange=function(){       
    12. if (image.readyState=="complete") {       
    13. var w= parseInt(image.width);       
    14. if(w>imgWidthToLimit) imgCongObj[this.i].width=imgWidthToLimit;       
    15. }       
    16. }       
    17.       
    18. }       
    19. }       
    20. </script>    

     

  2.   
  3. 或   
  4. <div id=hcimg>此处写上图片代码div>