background image misaligning during loading despite javascript

Radscientist · 03-02-2012, 07:46 PM

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;
}

webdev1958 · 03-03-2012, 12:59 AM

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.

Radscientist · 03-03-2012, 11:03 AM

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.