JavaScript pictures automatic scaling and vertical Center processing functions _ image effects

Source: Internet
Author: User
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> &Lt;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]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.