Search code examples
javascriptunobtrusive-javascript

Using Javascript to Measure the Current Window

Ok, so I'm trying to build a website in which a large picture is the background. I want to be able to load a different size picture based on the user's window size so they (hopefully) don't see any blank space. I want to use JavaScript to measure the size of the current screen. Then, based on the size of the window, I would like to load in an image that corresponds to that resolution.

However, when looking online, I could not find a standard way to get the window size in all browsers. Any help is very appreciated! Also, if you have another idea of how to implement this, let me know!

Solution

  • A user's window is unlikely to vary hugely in size during use. It's best to only provide one image, and then scale it depending on the size. This can be achieved through CSS alone. 

    img#my-big-background-image { 
    width: 100%;
}