View Full Version : Divs auto resize on window width and height

06-17-2012, 03:57 PM
I am working on a project and I am trying to create the following:

I want to have three or more divs below eachother (with content and background image). When you open the browser, all these divs have to resize automatic to the browser size (width and height). When you resize the browser window (without refreshing), the divs have to be as big as they were (so they should not resize with the window). After you make the browser screen smaller and you refresh, the divs should adjust to the new window size. (there should be a minimum width of 1024 so the divs cannot get smaller than that)

Inside the divs I want to add background image. (photo's). My goal is to resize the photo's exacly as the div size. So the height has to be scaled with the width of the photo/div.

For example: if the browser window is 1024x768, the div and photo have to be 1024x768. When I resize the browser, the div stays 1024x768. When you resize your browser as 1280x720 and refresh, the divs should automaticly adjust to that size. The height of the div should always be in scale with the width.

Does anyone know how to make this? I cannot find it anywhere else.

Will Bontrager
06-18-2012, 12:28 PM
To handle your specifications, I think JavaScript would be the way to handle this.

When the page loads or reloads, JavaScript measures the size of the browser window viewing area. Then, the div width and height are calculated and set and the image display sizes are calculated and set.