Help with onresize and resizing of image

programming web dev
1

Hi

Im trying to create a script that resizes a image on the page depending on the browsersize. The image’s ratio is allways 16x9, in this case 1600px x 900px. Heres the code:

<html>
<head>

<link href="stylesheet.css" rel="stylesheet" type="text/css" />

<script language="javascript">

function ScaleSize() {
    
    if ((document.body.clientWidth / 16 ) > (document.body.clientHeight / 9)) {
        //the window is wider than it is tall
        document.getElementById("showcaseImg").style.width = document.body.clientWidth;
        document.getElementById("ShowcaseImg").style.height = document.body.clientWidth / 16 * 9;
    } else {
        //the window is taller than it is wide
        document.getElementById("showcaseImg").style.height = document.body.clientHeight;
        document.getElementById("showcaseImg").style.width = document.body.clientHeight / 9 * 16;
    };
}

function changeImg() {

        document.getElementById("showcaseImg").src="test2.jpg";

}

</script>
</head>
<body onload="javascript:ScaleSize();" onResize="javascript:ScaleSize();">
<div id="showcase"><img onclick="changeImg()" id="showcaseImg" src="test3.jpg"  /></div>
</body>
</html>

Now, i have two problems:

1: Right now i dont have a doctype specified, cause as soon as i add one, it breaks the script, and the image won’t scale.

2: If i resize the browser window quick, the aspect ratio of the image sometimes gets lost, etc the squares arent the same height and width.

Heres an example of the page:

http://hejven.dk/test/test.html

Hope you guys can help me out.

take care
/Aske