Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2006
    Location
    Washington, DC
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts

    background image misaligning during loading despite javascript

    Hi, everyone. I've just finally adjusted the way that the background images is laid out. my problem is that the image seems to load in original size and then align to the screen's width.

    I'm using a javascript code that I got from http://stackoverflow.com/questions/1...g-aspect-ratio and it is working the way I want it to, mostly.

    My problem is that I'm not sure how to keep the image from exceeding 100% height of the windows without squashing the aspect ratio?

    I also need to figure out how to fix the visible action of the image being loaded in it's original size? If we can't get the image to load WHILE at the size I want it to be, can we at least 'hide' the image until the loading have been done?

    I tried to tweak the codes to include the height limitation but it did not seem to have made any differences. This is my first time actually using javascript so please be easy on me, heh

    My site is at http://www.lost-ear-studio.com (if you refresh the site, you will see random background images being swapped out using php).

    Code:
    <script>
    function resizeToMax(id){
        myImage = new Image() 
        var img = document.getElementById(id);
        myImage.src = img.src; 
        if(myImage.width > myImage.height){
            img.style.width = "100%";
        } else {
            img.style.height = "100%";
        }
    }
    </script>
    Code:
    <img id="bg" src="randombg.php" onload="resizeToMax(this.id)">
    Code:
    #bg{
    position:fixed;
    left:0px;
    top:0px;
    z-index:-1;
    }
    Last edited by Radscientist; 03-02-2012 at 11:40 PM.

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Since you don't want the image to go beyond 100% height of browser window, why not just set the image to 100% height in all cases. This will then mean that the image will not always take up 100% width unless you are happy for the image to be distorted if the browser window's aspect ratio is different to the image's aspect ratio.

    Basically I think you'll have to choose which is more important - 100% width or 100% height for the image. You can't have both without image distortion because the user can resize the browser to whatever they like (unless you set resize=no) and so it's very unlikely the browser window's aspect ratio will be the same as the image aspect ratio.

  • #3
    New Coder
    Join Date
    Nov 2006
    Location
    Washington, DC
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    An idea just occurred to me. I do need to optimize my photo for faster loading so I can wean out the tall photo (or add a border to the side of it) so I can keep all photo to the same aspect ratio. Is it possible to detect the aspect ratio of the monitor so I can resize the images to fill the whole screen?

    I currently have the site switched to height 100% to see how it feels. Gonna work on it some more. Thanks.


  •  

    Posting Permissions

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