# Help with onresize and resizing of image

**URL:** <https://forum.kirupa.com/t/help-with-onresize-and-resizing-of-image/295028>\
**Category:** web dev\
**Created:** [August 24, 2009, 2:40pm UTC](https://forum.kirupa.com/t/help-with-onresize-and-resizing-of-image/295028 "2009-08-24T14:40:02Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ht56y](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ht56y/32/3583_2.png) [@ht56y](https://forum.kirupa.com/u/ht56y)\
**Post date:** [August 24, 2009, 2:40pm UTC](https://forum.kirupa.com/t/help-with-onresize-and-resizing-of-image/295028/1 "2009-08-24T14:40:02Z")

</div>

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:

```auto
<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](http://hejven.dk/test/test.html)

Hope you guys can help me out.

take care  
/Aske
