首页 > 网络编程 > JavaScript > javascript技巧 > 控制图片大小的js css+js完美控制图片大小 2009-08-14 16:52:57 作者： 在做网站的时候，往往图片的处理很重要，固定尺寸容易变形拉伸，不固定又会有不可预知的问题，有可能撑开页面。 使用js和css讲图片的现实控制在固定的区域内，大于这个区域的等比例缩放，小于这个区域的居中显示。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css+js完美控制图片大小</title> <script type="text/javascript" language="JavaScript"> <!-- var flag=false; function DrawImage(ImgD){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height>= 400/400){ if(image.width>400){ ImgD.width=400; ImgD.height=(image.height*400)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"x"+image.height; } else{ if(image.height>400){ ImgD.height=400; ImgD.width=(image.width*400)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"x"+image.height; } } } //--> </script> <style type="text/css"> <!-- * { margin:0; padding:0; } li { list-style:none; } img { border:0; } .group_head { width:400px; height:400px; line-height:400px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; float:left; margin-right:10px; } .group_head p { position:static; +position:absolute; top:50%; vertical-align:middle } .group_head img { position:static; +position:relative; top:-50%;left:-50%; vertical-align:middle } --> </style> </head> <body> <ul class="jobGroup"> <li><a href="https://www.jb51.net"><div class="group_head"><p><img width="400" height="400" src="http://www.baidu.com/img/baidu_logo.gif" onload="DrawImage(this);"/></p></div></a> </li> </ul> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:JavaScript限定图片显示大小的方法JS获取图片实际宽高及根据图片大小进行自适应JS+css 图片自动缩放自适应大小JavaScript 动态改变图片大小js 加载时自动调整图片大小纯js实现div内图片自适应大小(已测试，兼容火狐)JS自动缩小超出大小的图片js获取图片大小的函数代码JS检测图片大小的实例JS实现控制图片显示大小的方法【图片等比例缩放功能】
