Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Thanked 0 Times in 0 Posts

    Divs auto resize on window width and height

    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.

  2. #2
    Regular Coder
    Join Date
    Jun 2012
    Near Chicago, USA
    Thanked 19 Times in 19 Posts
    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.

    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts