...

View Full Version : Help with resizing



chicagobudd
08-27-2006, 09:45 PM
I am new to javascript so I am guessing this is a simple fix that I am just not understanding.

I need to resize an image to make sure it is under 800px in width. The height doesn't matter, but it needs to maintain the original aspect ratio.

I have created the following:

<script language="javascript">


var saveWidth = 0;

function scaleImg(what){
what = document.getElementById(what);
if (navigator.appName=="Netscape")
winW = window.innerWidth;
if (navigator.appName.indexOf("Microsoft")!=-1)
winW = document.body.offsetWidth;
if (what.width>(800) || saveWidth>(800)) {
if (what.width==(800))
what.width=saveWidth;

else
{
saveWidth = what.width;
what.style.cursor = "pointer";
what.width=(800);
}

}
}
</script>

This works perfect for the width, but if an image is resized only the width changes. What do I need to add to have the height stay in line with the resized width?

Any help would be greatly appreciated.

An example of how it looks currently is here (http://guiltyobsession.com/index.php/images/photo/169526231/nerbleemiliederavingiant038hy.html)

vwphillips
08-27-2006, 09:57 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function ReSize(id,sz){
var obj=document.getElementById(id);
var ratio=obj.width/obj.height;
obj.width=sz;
obj.height=obj.width/ratio;
}
//-->
</script></head>

<body>
<input type="button" name="" value="ReSize to 800" onclick="ReSize('Img1',800);" > <input type="button" name="" value="ReSize to 400" onclick="ReSize('Img1',400);" ><br>
<img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="1200" height="800" >
</body>

</html>

chicagobudd
08-27-2006, 10:10 PM
The only problem with that is I want to upload a photo, of any size, and have the initial resize to no more than 800px down automatically. Like my current script does.

Is there a simple way to just maintain the aspect ratio?

chicagobudd
08-27-2006, 10:46 PM
I figured it out, at least for my purposes:

<script language="javascript">
function resize(img)
{
if(img.width>800)
{
img.height = parseInt(img.height * 800 / img.width);
img.width = 800;
}
}
</script>

The moving back to the original size onClick shouldn't be that hard.

Thanks for the help.

vwphillips
08-27-2006, 10:52 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var SRCAry=[];
var Cnt=0;
var TO;

function Img(id,img,sz){
SRCAry[Cnt]=new Image();
SRCAry[Cnt].src=img;
clearTimeout(TO);
CkLoad(id,sz);
}

function CkLoad(id,sz){
if (SRCAry[Cnt].complete){
document.getElementById(id).src=SRCAry[Cnt].src;
ReSize(id,sz);
}
else {
TO=setTimeout(function(){ CkLoad(id,sz); },500);
}

}
function ReSize(id,sz){
var obj=document.getElementById(id);
var ratio=SRCAry[Cnt].width/SRCAry[Cnt].height;
obj.width=sz;
obj.height=obj.width/ratio;
Cnt++;
}
//-->
</script>

</head>

<body onload="Img('Img1','http://www.vicsjavascripts.org.uk/StdImages/One.gif',800);" >
<input type="button" name="" value="ReSize to 800" onclick="ReSize('Img1',800);" > <input type="button" name="" value="ReSize to 400" onclick="ReSize('Img1',400);" ><br>
<img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=50 height=50 >
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum