<!doctype HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ""
< Meta http-equiv= "Content-type" content= "text/html;" charset=gb2312 "/>
<title> several JS pictures and other proportional scaling effect code </TITLE>
<script>
Function Wa_ Setimgautosize (img)
{
//var img=document.all.img1;//get picture
var maxwidth=200;//set picture width limit
var maxheight=10 0;//Set Picture height bounds
var heightwidth=img.offsetheight/img.offsetwidth;//set aspect ratio
Var widthheight=img.offsetwidth/ img.offsetheight;//Sets the width-height ratio
Alert ("Test" +img.offsetheight+img.filesize);
if (img.offsetheight>1) alert ( Img.offsetheight);
if (img.readystate!= "complete") {
return false;//ensure that the picture is fully loaded
}if (img.offsetwidth>maxwidth) {
Img.width=maxwidth;
Img.height=maxwidth*heightwidth;
}
if (img.offsetheight>maxheight) {
Img.height=maxheight;
Img.width=maxheight*widthheight;
}
}
</script><body>
</body>
Below look at a temple complete JS picture size scaling Example
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> picture automatic proportional reduction and vertical center </title><style type= "Text/css" >
<!--
* {
margin:0;
padding:0;
}
. imgbox Li {
List-style:none;
width:200px; /* Width * *
height:200px; /* Height *
Background: #ccc;
border:1px solid #666;
Text-align:center;
margin:5px;
line-height:200px;
}
. imgbox img {
max-width:200px; /* Width * *
max-height:200px; /* Height *
Vertical-align:middle;
}
-->
</style>
<!--[If LTE IE 6]>
<script type= "text/web Effects" language= "JavaScript" >
function Imgfix () {
Define the width of the picture that you want to limit, this wide Gaoyao is the same as the style definition, less than the defined high width of the picture does not operate
var widthrestriction = 200;
var heightrestriction = 200;
var allelements = document.getelementsbytagname (' * ')
for (var i = 0; i < allelements.length; i++)
{
if (Allelements[i].classname.indexof (' Imgbox ') >= 0)
{
var imgelements = allelements[i].getelementsbytagname (' img ');
For (Var j=0 j < Imgelements.length; J + +)
{
if (Imgelements[j].width > widthrestriction | | | imgelements[j].height > Heightrestriction)
{
if (Imgelements[j].width > Imgelements[j].height)
{
Imgelements[j].height = imgelements[j].height* (widthrestriction/imgelements[j].width);
Imgelements[j].width = widthrestriction;
} else
{
Imgelements[j].width = imgelements[j].width* (heightrestriction/imgelements[j].height);
Imgelements[j].height = heightrestriction;
}
}
if (Imgelements[j].height < heightrestriction)
{
Imgelements[j].style.paddingtop = (heightrestriction-imgelements[j].height)/2 + "px";
}
}/*for j*/
}
}/*for i*/
}
Window.onload = Imgfix;
</script>
<! [endif]--><body>
<ul class= "Imgbox" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
Instance Code
<title> Zoom picture Size </title>
<script language= "JavaScript" >
var zoomlevel = 0;
var currentwidth = 0;
var currentheight = 0;
var originalwidth = 0;
var originalheight = 0;
function initial () {
Currentwidth = Document.myimage.width;
Currentheight = Document.myimage.height;
OriginalWidth = Currentwidth;
OriginalHeight = Currentheight;
Update ();
}
function ZoomIn () {
Document.myimage.width = currentwidth*2;
Document.myimage.height = currentheight*2;
Zoomlevel = Zoomlevel + 1;
Update ();
}
function Zoomout () {
Document.myimage.width = CURRENTWIDTH/2;
Document.myimage.height = CURRENTHEIGHT/2;
Zoomlevel = ZOOMLEVEL-1;
Update ();
}
function Resetimage () {
Document.myimage.width = OriginalWidth;
Document.myimage.height = OriginalHeight;
Zoomlevel = 0;
Update ();
}
function Update () {
Currentwidth = Document.myimage.width;
Currentheight = Document.myimage.height;
Zoomsize.innertext = Zoomlevel;
Imgsize.innertext = currentwidth + "x" + currentheight;
}
</script>
<body onload= "initial ()" >
<div align= "left" style= "font:10pt;overflow-y:scroll;
overflow-x:scroll;height=350;width=600 ">
</div>
<input type= "button" value= "Enlarge picture" onclick= "ZoomIn ()" >
<input type= "button" value= "Shrink picture" onclick= "Zoomout ()" >
<input type= "button" value= "Reset Picture" onclick= "Resetimage ()" >
(<span id= "Zoomsize" ></span>)-<span id= "Imgsize" ></span>
</body>
Example Four
<script type= "Text/javascript" >
<!--
var Flag=false;
Picture and so on scale reduction:function DrawImage (IMGD) {
var image=new image ();
var iwidth = 450;
var iheight = 400; Defines the allowable height, which shrinks when the width is greater than this value
IMAGE.SRC=IMGD.SRC;
if (image.width>0 && image.height>0) {
Flag=true;
if (image.width/image.height>= iwidth/iheight) {
if (image.width>iwidth) {
Imgd.width=iwidth;
imgd.height= (image.height*iwidth)/image.width;
}else{
Imgd.width=image.width;
Imgd.height=image.height;
}
}else{
if (image.height>iheight) {
Imgd.height=iheight;
Imgd.width= (image.width*iheight)/image.height;
}else{
Imgd.width=image.width;
Imgd.height=image.height;
}
}
}
}
Call:
-->
</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
