Results 1 to 9 of 9

Thread: Scale image size to the browser window

  1. #1
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Scale image size to the browser window

    Hello,
    I am a photographer, and have a little knowledge of javascript/html, so I hope you can help me out. My goal is to create a splash page for the flash website with one image centered on the page. Also I would like to display photograph so that it fills / scale as much as possible of the browser's window, and retains its ratio. it must be a cross-browser solution. It cannot be a background image since I am going to put some text under the image.
    Thank you!

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Hi 4dimad,
    I set up an example page here.
    Not sure exactly what you need, but take a look and tell me what changes you would like.

  3. #3
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Dear azoomer,
    Here is my page: http://www.adreampicture.com/Splash/index.htm
    The code I use doesn't scale image in Firefox - it opens up original size, which is 1024x768 (not sure about other browsers):

    <script type="text/javascript">
    function resizeImage()
    {
    var window_height = document.body.clientHeight
    var window_width = document.body.clientWidth
    var image_width = document.images[0].width
    var image_height = document.images[0].height
    var height_ratio = image_height / window_height
    var width_ratio = image_width / window_width
    if (height_ratio > width_ratio)
    {
    document.images[0].style.width = "auto"
    document.images[0].style.height = "90%"
    }
    else
    {
    document.images[0].style.width = "90%"
    document.images[0].style.height = "auto"
    }
    }
    </SCRIPT>

    <body onResize="resizeImage()" bgcolor="#343430"><center>
    <img src="SplashPage_new.jpg" border="0" margin="0"></center>

    </body>

  4. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Yes i see it behaves a little strange. Do you need the picture to be 90% width at all times ?
    Is there a particular reason you are using javascript and not regular css ?

  5. #5
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    OK take a look a this page to see if it works the way you need:
    http://azoomer.com/Splash/

  6. #6
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Looking at your code again it seems like you want all of the picture to be in view at all times, never exceeding neither 90% width nor 90% height. It looks like your javascript is only going into action on the actual resize event and not when the page is loading. I tried to add

    <body onResize="resizeImage()" bgcolor="#343430" onload="resizeImage()" >

    to your code and that seems to work. With this it resizes immediately when the page is loading ( in my browser anyway). I don't have a clue whether this is right or wrong, so corrections are most welcome. Just guessing you know !

  7. #7
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default


    Thank you!!! I have another question – hope you can help. I am trying to map “Enter site” button, but every time image gets resize the clickable area moves. I really appreciate your help!

  8. #8
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    The easy thing would be to make the whole image a link so peolple would enter the site no matter where they click on the picture.

  9. #9
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by azoomer View Post
    Hi 4dimad,
    I set up an example page here.
    Not sure exactly what you need, but take a look and tell me what changes you would like.
    Thank you for sharing this!

Bookmarks

Posting Permissions

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