Copy Code code as follows:
<title>Untitled</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>
<script type= "Text/javascript" >
function Autosizeimg (contents,offsetwidth,offsetheight,vlmiddle) {
var o=contents.getelementsbytagname ("IMG");
var cwidth= window.getcomputedstyle?window.getcomputedstyle (contents,null). width:contents.currentstyle["width"];
var cheight=window.getcomputedstyle?window.getcomputedstyle (contents,null). height:contents.currentstyle["Height "];
var ncwidth=parseint (cwidth);
var ncheight=parseint (cheight);
for (Var i=0;i<o.length;i++) {
var img=o[i];
var iw=img.width;
var ih=img.height;
if (img.width>ncwidth) {
var nw=ncwidth-offsetwidth;
Img.width=nw
img.height= (NW*IH)/iw;
}else if (img.width<ncwidth&&img.height>ncheight) {
var nh=ncheight-offsetheight;
IMG.HEIGHT=NH;
Img.width= (NH*IW)/ih;
}
if (img.height>ncheight&&img.width<ncwidth) {
var hh=ncheight-offsetheight;
IMG.HEIGHT=NH;
Img.width= (NH*IW)/ih;
}
if (Vlmiddle) img.style.margintop= ((ncheight-img.height)/2) + "px";
}
}
</script>
<body>
<div class= "Testcss" >
</div>
<div class= "TestCss1" >
</div>
<div> </div>
<div class= "TestCss2" >
</div>
</body>
Note:
1, the back of the TestCss1 and testCss2 two styles and testcss is the same. Just set the size.
2, the red part of the height and width must be defined, is set to store the IMG outside the parent layer container height and width.
3, Text-algin: For the picture horizontal center
4, Display:block, must be set. Otherwise, enabling automatic scaling under FF does not work.
How to use:
1, is required in the IMG parent layer definition style, including the above notes mentioned in the things;
2, is the IMG Plus
Onload= "Autosizeimg (this.parentnode,5,5,true)"
Parameter description:
Parameter contents generally used This.parentnode, even if the parent of IMG is easy
The parameter offsetwidth,offsetheight is the correction value of width and height respectively.
The parameter vlmiddle is set to true to center vertically
<ptml> <pead> <title>Untitled</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> <script type= "Text/javascript" >/* function: Picture automatic scaling and vertical center processing time: 2008-08- 06 Author: Paulleder Contact me: paulleder@yeah.net * * Function autosizeimg (contents,offsetwid Th,offsetheight,vlmiddle) {var o=contents.getelementsbytagname ("IMG"); var cwidth= window.getcomputedstyle?window.getcomputedstyle (contents,null). width:contents.currentstyle["width"]; var cheight=window.getcomputedstyle?window.getcomputedstyle (contents,null). height:contents.currentstyle["Heigh T "]; var ncwidth=parseint (cwidth); var ncheight=parseint (cheight); for (Var i=0;i<o.length;i++) {var img=o[i]; var iw=img.width; var ih=img.height; if (img.width>ncwidth) {var nw=ncwidth-offsetwidth; IMG.WIDTH=NW img.height= (nw*ih)/iw; }else if (img.width<ncwidth&&img.height>ncheight) {var nh=ncheight-offsetheight; IMG.HEIGHT=NH; Img.width= (NH*IW)/ih; } if (img.height>ncheight&&img.width<ncwidth) {var hh=ncheight-offsethe ight; IMG.HEIGHT=NH; Img.width= (NH*IW)/ih; } if (Vlmiddle) img.style.margintop= ((ncheight-img.height)/2) + "px"; }} </script> </pead> ≪body> <div class= "Testcss" > </div> <div class= "TestCss1" > </div& Gt <div> </div> <div class= "TestCss2" > </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]