在我们实际网站制作过程中,很多客户在使用网站后台时没有学过专业的知识,很多客户在未处理的情况下,直接上传数码相机中拍摄的照片。这样当图片尺寸较大时,如果按照真实的比例去显示网页布局可能会出现错位的现象,我们可以使用JS代码实现当图片宽度超过一定的尺寸后自动收缩。
易天js代码之:使用JS实现图片超过指定的宽度自动收缩成设定的宽度
在此之前需要将图片所在的容器的ID设置为hcimg如
XML/HTML代码
- <table id=hcimg><tr><td>此处写处图片td><tr>table>
JavaScript代码
- <script language="javascript" type="text/javascript">
- window.onload=function()
- {
- var imgWidthToLimit=580; //对图片的限制宽度
- var imgCongObj = hcimg.getElementsByTagName("IMG"); //获取id为hcimg的页面容器(div、table等)中的所有img对象
- for( i=0;i<imgCongObj.length;i++)
- {
- var image = new Image();
- image.src=imgCongObj[i].src;
- image.i=i;
- image.onreadystatechange=function(){
- if (image.readyState=="complete") {
- var w= parseInt(image.width);
- if(w>imgWidthToLimit) imgCongObj[this.i].width=imgWidthToLimit;
- }
- }
- }
- }
- </script>
- 或
- <div id=hcimg>此处写上图片代码div>