Auto resizing image based on viewers screen resolution?

**GamerBlake** · 06-10-2003 07:32 AM

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.

**pyro** · 06-10-2003 07:39 AM

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">

**GamerBlake** · 06-10-2003 08:50 AM

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).

**pyro** · 06-10-2003 10:24 AM

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">

**GamerBlake** · 06-10-2003 11:14 AM

Thanks alot. I like these forums..

**pyro** · 06-10-2003 11:20 AM

You bet... Glad you do...

**GamerBlake** · 06-11-2003 09:42 PM

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?

**GamerBlake** · 06-15-2003 06:23 PM

Just wondering if anyone can help me out with the above problem please?

**pyro** · 06-15-2003 06:34 PM

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">

**GamerBlake** · 06-16-2003 04:26 AM

Will this script work off line, because I'm buggered if I can get it to work on my pc.

**pyro** · 06-16-2003 07:32 AM

Yep, it works fine... Try this:

**GamerBlake** · 06-17-2003 12:49 AM

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..

**pyro** · 06-17-2003 07:02 AM

Originally posted by GamerBlake
You're my own personal Jesus Christ..

I hope not...

Thread: Auto resizing image based on viewers screen resolution?

Thread Tools

Display

Auto resizing image based on viewers screen resolution?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions