<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;高さ:300px;border:1px 赤の実線;text-align:center;display:block;} <br>.testCss1{幅:300px;高さ: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.getComputedStyle?window.getComputedStyle(Contents,null).width:Contents.currentStyle["width"]; <br>var cheight=window.getComputedStyle?window.getComputedStyle(Contents,null).height:Contents.currentStyle["height"]; <br>var ncwidth=parseInt(cwidth); <br>var ncheight=parseInt(cheight); <br>for(var i=0;i<o.length>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>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></ncwidth></o.length> </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> <br></body> <br></html><br><br><strong>注釈:</strong> <br>1、後の testCss1 と testCss2 の 2 つの形式の testCss は同じです。 🎜>2、色の部分の高さと幅は、画像を保存する親層コンテナを配置するための高さと幅を指定する必要があります。 <br> <br> <br> 使用方法: <br> <br> 1 は、img の親階層に必要な形式であり、上記の注意事項を含む; <strong>2、はimg加上 </strong><br><br>onload="autoSizeImg(this.parentNode,5,5,true)" <br><br>パラメータ説明: <br>パラメータContents一般img の親が簡単になるように、this.parentNode を使用します。 <br> パラメータoffsetWidth、offsetHeight は、それぞれ垂直および高さの居間の修正値です。 <br> パラメータ vlmiddle は、垂直居中で true に設定されます。 <br> <br> <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> [Ctrl A 全选注:</textarea>如く必要取入外部Js必要刷新才能执行<br>]<input onclick="runEx('runcode12533')" type="button" value="运行代码"> </div>