[Kanishk Dudeja]

I want to dynamically set the height and width of an image using javascript so that the image looks proportionally fine according to different screen resolutions..

The original image is of 252*62 pixels..

I have used the following code..but it doesnt seem to work.

<script type="text/javascript">
function resizeheight() {
    var height = ((62*screen.height)/800);
 
	return height;
}
function resizewidth() {
    var width = ((252*screen.width)/1280);
 
	return width;
}

<img id="enter" src="enter.PNG" height="resizeheight()" width="resizewidth()" >

[Renaissance-Design]

You can't embed javascript calls in the width and height properties like that. You're best off attaching an event listener to DOM ready, and by the time you've done that you might as well use jQuery.

[Kanishk Dudeja]

Okay. Thank you

[Kanishk Dudeja]

I used another method. It worked. Thanks for your suggestion though

<img id="enter" src="enter.PNG" alt="enter" />

<script type="text/javascript">
target=document.getElementById('enter');
target.style.width=((252*screen.width)/1280)+'px';
target.style.height=((62*screen.height)/800)+'px';
</script>

[hodephdesign]

It might be worth looking into adding some script to the resize function of the body, as if the window is not the full screen size it will be too large (depending on what you're trying to achieve).

Adding a jQuery resize function to the "onresize" function of the body can allow the user to resize the window and have the image scale proportionally...

[Kanishk Dudeja]

yeah thanks