<div class="codetitle"> <span><a style="CURSOR: pointer" data="4247" class="copybut" id="copybut4247" onclick="doCopy('code4247')"><u>复代码</u></a></span> 代码如下:</div> <div class="codebody" id="code4247"> <br><html> <br><머리> <br><title>제목 없음</title> <br><style type="text/css"> <br>.testCss{폭:200px;height:300px;border:1px 빨간색 단색;text-align:center;display:block;} <br>.testCss1{width:300px;height:300px;border:1px 빨간색 단색 ;text-align:center;display:block;} <br>.testCss2{width:400px;height:300px;border:1px red solid;text-align:center;display:block;} <br></style> ; <BR><script type="text/javascript"> <br>function autoSizeImg(Contents,offsetWidth,offsetHeight,vlmiddle){ <br>var o=Contents.getElementsByTagName("IMG"); <br>var cwidth= window.getCompulatedStyle?window.getComputeStyle(Contents,null).width:Contents.currentStyle["width"]; <br>var cheight=window.getCompulatedStyle?window.getCompulatedStyle(Contents,null).height:Contents.currentStyle["height"]; <br>var ncwidth=parseInt(cwidth); <br>var ncheight=parseInt(cheight); <br>for(var i=0;i<o.length;i ){ <BR>var img=o[i]; <BR>var iw=img.width; <BR>var ih=img.height; <BR>if(img.width>ncwidth){ <br>var nw=ncwidth-offsetWidth; <br>img.width=nw <br>img.height=(nw*ih)/iw; <br>}else if(img.width<ncwidth&&img.height>ncheight){ <br>var nh=ncheight-offsetHeight; <br>img.height=nh; <br>img.width=(nh*iw)/ih; <br>} <br>if(img.height>ncheight&&img.width<ncwidth){ <BR>var hh=ncheight-offsetHeight; <BR>img.height=nh; <BR>img.width=(nh*iw)/ih; <BR>} <BR>if(vlmiddle)img.style.marginTop=((ncheight-img.height)/2) "px"; <BR>} <BR>} <BR></script> <br></head> <br><br><본문> <br><div class="testCss"> <br><img src="http://files.jb51.net/file_images/sucai/111131524.jpg" onload="autoSizeImg(this.parentNode,5,5,true)"/> <br></div> <br><div class="testCss1"> <br><img src="http://files.jb51.net/upload/20081010215957304.jpg" onload="autoSizeImg(this.parentNode,5,5,true)"/> <br></div> <br><div> </div> <br><div class="testCss2"> <br><img src="http://files.jb51.net/upload/20081010215958874.gif" onload="autoSizeImg(this.parentNode,5,5,true)"/> <br></div> <br></body> <br></html><br> </div> <br><strong>注释:</strong> <br>1、면적 testCss1과 testCss2는 两个样式跟testCss是一样적입니다.<br>2, 색상 부분의 높이와 너비를 정하여 ,是设置存放img 외부 화면의 父层容器에 맞는 높이를 설정합니다. <br>3, text-algin:为图 Pictures 平居中 <br>4,display:block,必须设置。否则FF下启用自动缩放不起式。 <br><br><strong>사용 방법:</strong>1、是需要재img义样式,包含上述注释里면提到的东西; <br>2、是img加上 <br><br><br>onload="autoSizeImg(this.parentNode,5,5,true)" <br><br>参数说明: <br>参数Contents一般采用this.parentNode,即使img的父容易 <br>参数offsetWidth,offsetHeight分别是宽和高島居中的修值。 <br>参数vlmiddle设置为true则是垂直居中 <br><br><div class="htmlarea"> <textarea id="runcode12533"> 제목 없음<title> </title> <style type="text/css"> .testCss{width:200px;height:300px;border:1px red solid;text-align:center;display:block;} .testCss1{width:300px;height:300px;border:1px red solid;text-align:center;display:block;} .testCss2{width:400px;height:300px;border:1px red solid;text-align:center;display:block;} </style> <div class="testCss"> <img src="http://files.jb51.net/file_images/sucai/111131524.jpg" onload="autoSizeImg(this.parentNode,5,5,true)" alt="JavaScript 이미지 자동 스케일링 및 수직 센터링 처리 기능_이미지 특수 효과" > </div> <div class="testCss1"> <img src="http://files.jb51.net/upload/20081010215957304.jpg" onload="autoSizeImg (this.parentNode,5,5,true)"> </div> <div> </div> <div class="testCss2"> <img src="http://files.jb51.net/upload/20081010215958874.gif" onload="autoSizeImg(this.parentNode,5,5,true)" alt="JavaScript 이미지 자동 스케일링 및 수직 센터링 처리 기능_이미지 특수 효과" > </div> </textarea><br><input onclick="runEx('runcode12533')" type="button" value="运行代码"> <input onclick="doCopy('runcode12533')" type="button" value="复制代码"> <input onclick="doSave(runcode12533)" type="button" value="保存代码">[Ctrl A 전체选 注:<a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">如需引入외부Js需刷新才能执行</a>]</div>