Hi I have a problem with the code im using to resize an image to fit it within a fixed size cell in a table. The code is supposed to resize the image and retain its aspect ratio. But it does not seem to be resizing it . The example can be seen here www.climbthemunros.co.uk/test_page2.htm
My code is shown below . Can anyone see what im doing wrong ?
My code is shown below . Can anyone see what im doing wrong ?
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ben Nevis - Image Gallery</title>
<script type="text/javascript">
function bigpic(file)
{
var main = document.getElementById("MAINPIX");
main.style.height = "auto";
main.style.width = "auto";
main.src = (file)
}
function fixSize(image)
{
var w = image.width *2;
var h = image.height *2;
if ( w > 395 )
{
h = Math.floor( h * 395 / w );
w = 395;
}
if ( h > 286 )
{
w = Math.floor( w * 286 / h );
h = 286;
}
image.width = w;
image.height = h;
image.style.left = Math.floor( (395 - w ) / 2 ) + "px";
image.style.top = Math.floor( (286 - h ) / 2 ) + "px";
image.style.visibility = "visible";
}
</script>
</head>
<body>
<div style="position: relative; height: 280px; width: 395px; overflow: hidden">
<img id="MAINPIX" style="position: absolute;" onload="fixSize(this);"> </div>
<a onclick="bigpic('http://www.climbthemunros.co.uk/test4.jpg')">next </a>
<a onclick="bigpic('http://www.climbthemunros.co.uk/test3.jpg')">previous</a>
</body>
</html>
Comment