Resize window as per resoltuion

JavaScript
1

Hello Guys

I would like to fit my webpage to every resoltuion by using jquery/javascript.

Like this site: http://www.360-stl.com

I would like to show full page without vertical scroll in any resoltion.

Please help.

2

Here is a very simple prototype that might help you get started. It simply scales the image content to fit the current size of the browser window. To do something like 360-stl.com, you might place the image inside a <div> element, which is what you would scale to fit the window. Then scale the image so it fits inside the <div>, but maintain a constant ratio between the image’s height and width, so it isn’t distorted. Any portion of the image that doesn’t fit in the <div> would be truncated, as at 360-stl.com.


<!DOCTYPE html>
<html>
<head>
<title>JavaScript Tester Page</title>

<style type="text/css">

</style>

<script>

var image;

window.onresize = function ()
   {
   image.width = window.innerWidth;
   image.height = window.innerHeight;
   };


window.onload = function ()
   {
   image = document.getElementById ("image");

   image.width = window.innerWidth;
   image.height = window.innerHeight;

   }
</script>

</head>
<body>

<p>
   <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/240px-The_Earth_seen_from_Apollo_17.jpg" id="image">
</p>

</body>
</html>
3

i am trying to use this but JavaScript error is giving image not found… again and again…and even if i use this then scroll up the page then at some points image getting aside to right and to bottom…please help me to auto resize the html page image according to desktop resolution

4

I don’t understand the nature of the problem you’re having. I just checked and the code I gave still works in IE9 and FF10. It does need to be improved – for example, it doesn’t maintain the aspect ratio of the image so the proportions of the graphics get distorted.