www.webdeveloper.com
Results 1 to 13 of 13

Thread: Auto resizing image based on viewers screen resolution?

  1. #1
    Join Date
    Nov 2002
    Location
    Australia
    Posts
    28

    Question Auto resizing image based on viewers screen resolution?

    Making up a logo for my new site in gif format. It'll fill the top part of the screen in 800x600, but I want it to auto resize to fill screens on higher resolutions depending on the visitors res.

    Can this be done with JavaScript?

    Any help appreciated thanks.
    Nintendo Gamer writer

  2. #2
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Odds are, you image won't look all that great once it get's streached, but here's how:

    Code:
    <script type="text/javascript">
    function resizeImage() {
    	if (screen.width == 800) {
        	document.images["logo"].style.width = "800px";
    	}
    	else if (screen.width == 1024) {
        	document.images["logo"].style.width = "1024px";
    	}
    	/*You can add more here*/
    	else {
        	document.images["logo"].style.width = "1200px";
    	}
    }
    </script>
    
    </head>
    
    <body onload="resizeImage();">
    <img src="logo.gif" name="logo">

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  3. #3
    Join Date
    Nov 2002
    Location
    Australia
    Posts
    28
    Thanks

    Originally posted by pyro
    [B]Odds are, you image won't look all that great once it get's streached,
    Well I'll actually be using a logo made for the highest res and shrinking it down for the smaller screens (assuming I can do that with this script?)

    Would there happen to be a script that will allow me to load a completely different sized version of the logo perchance? (for diffrent screen resolutions of course).
    Nintendo Gamer writer

  4. #4
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Yes, that is actually the best way to do it. Try this:

    Code:
    <script type="text/javascript">
    function resizeImage() {
    	if (screen.width == 800) {
        	document.images["logo"].src = "yoursmall.gif";
    	}
    	else if (screen.width == 1024) {
        	document.images["logo"].src = yourmedium.gif";
    	}
    	/*You can add more here*/
    	else {
        	document.images["logo"].src = "yourlarge.gif";
    	}
    }
    </script>
    
    </head>
    
    <body onload="resizeImage();">
    <img src="logo.gif" name="logo">

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  5. #5
    Join Date
    Nov 2002
    Location
    Australia
    Posts
    28
    Thanks alot. I like these forums..
    Nintendo Gamer writer

  6. #6
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    You bet... Glad you do...

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  7. #7
    Join Date
    Nov 2002
    Location
    Australia
    Posts
    28
    Hmm, I'm having trouble getting the different logo script to work. I've got it below with what I think I need to change, er, changed...


    Code:
    <script type="text/javascript">
    function resizeImage() {
    	if (screen.width == 800) {
        	document.images["logo"].src = "http://www.myserver.com/urnnlogo1.gif";
    	}
    	else if (screen.width == 1024) {
        	document.images["logo"].src = "http://www.myserver.com/urnnlogo2.gif";
    	}
    	/*You can add more here*/
    	else {
        	document.images["logo"].src = "http://www.myserver.com/urnnlogo3.gif";
    	}
    }
    </script>
    I'm assuming the above is correct? Not missing anything am I?

    I think I might be going wrong with the below code:

    Code:
    </head>
    
    <body onload="resizeImage();">
    <img src="logo.gif" name="logo"> [/B]
    What do I actually link the source too, seeing as I don't actually have a "Logo.gif", and do I need to keep the "name" command in there?
    Nintendo Gamer writer

  8. #8
    Join Date
    Nov 2002
    Location
    Australia
    Posts
    28
    Just wondering if anyone can help me out with the above problem please?
    Nintendo Gamer writer

  9. #9
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Make sure you point your image tag to an actual image. I would point it to the 800x600 one, as that is currently the most popular screen res. It is a good idea to do this anyway, as some 13% do not have javascript enabled...

    <img src="http://www.myserver.com/urnnlogo1.gif" name="logo">

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  10. #10
    Join Date
    Nov 2002
    Location
    Australia
    Posts
    28
    Will this script work off line, because I'm buggered if I can get it to work on my pc.
    Nintendo Gamer writer

  11. #11
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Yep, it works fine... Try this:
    Attached Files Attached Files

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  12. #12
    Join Date
    Nov 2002
    Location
    Australia
    Posts
    28
    Ahh, I think I had some redundant code in there or something, I've got it working now, thanks.

    You're my own personal Jesus Christ..
    Nintendo Gamer writer

  13. #13
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Originally posted by GamerBlake
    You're my own personal Jesus Christ..
    I hope not...

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles