Help, How do you get an image to resize to your specific scr

Rocknrob · 12-05-2003, 11:12 AM

Hello Everyone,

I have a question and hope you can understand. If I have a photo on a page and I want it to automatically adjust to the person's own screen size, how would I do that? That way someone wouldn't have to scroll to see the whole photo.

Here's a link to help me with.

Any suggestions?
Thanks Ahead,
Robynhttp://www.michaelquintonphotography...as/newhome.htm

**LazyJim** · 12-05-2003, 02:36 PM

- Use javascript to change the width and height after finding the window width and height;
- Use CSS width and height 100%;
- use javascript to change the src to another image, (a larger/smaller one), that you have on your server.

**LazyJim** · 12-05-2003, 02:37 PM

those are supposed to be either/or options, u don't need all three

AcRoNym · 12-05-2003, 03:00 PM

u like js dont u lj!

Rocknrob · 12-05-2003, 03:00 PM

Hey thanks LazyJim, but that doesn't really spell things out for me. I understand you are saying use 1 of these techniques, but did you happen to look and see what I am using now? It doesn't work, but I did put the link there.

I have been all over the web, looking in my books for the script, and I guess I just don't get it.
Please help more if you could.

Thanks Again,
Robyn

**LazyJim** · 12-05-2003, 03:41 PM

you wan't to resize the image to the users screen size?

**LazyJim** · 12-05-2003, 03:42 PM

Quote:

Originally Posted by AcRoNym

u like js dont u lj!

your point?

**LazyJim** · 12-05-2003, 03:54 PM

Your current page:
[code:1:995066ce74]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<script language="JavaScript1.2">
function resize()
{
window.resizeTo((screen.availWidth),(screen.availH eight));
window.moveTo(0,0);
}

function fillScreen() {
if (window.outerWidth) {
windowWidth = screen.width;
windowHeight = screen.height;
moveTo(0,0);
resizeTo(windowWidth,windowHeight);
}
}
</script>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>

<BODY bgcolor="#000000" onLoad="java script:resize();">
<IMG src="../images/cutthroat_trout.jpg">
</BODY>
</HTML>[/code:1:995066ce74]

Your mistakes:
[code:1:995066ce74]<BODY bgcolor="#000000" onLoad="java script:resize();">[/code:1:995066ce74]
The event properties of HTML elements are special attributes, the string inside them should be valid JavaScript statements.
"java" would cause an error.
"script" would cause an error.
":" wuold cause an error.
take those out and "resize()" will work assuming the resize() function has been defined (without errors).

So your script never actually runs, for starters.
If it did, the browser window would be resized to fill the screen nicely.
Obviously the image won't.

add style="width: 100%" into the image and that might do the trick.

Rocknrob · 12-09-2003, 11:25 AM

Thanks Lazy Jim,
I would like you or someone to look again at my code. How do I get the picture to resize according to the persons own screen size(resolution?

Thanks so much for the help you have given so far.
Really appreciate it.
:-)
Robyn

**LazyJim** · 12-09-2003, 11:43 AM

have you ried my CSS suggestion?

<IMG src="../images/cutthroat_trout.jpg" style="width:100%; height:100%;">

**LazyJim** · 12-09-2003, 11:54 AM

of course the window would have to be full size then.

the javascript solution would be:
<img src="../Meteora/quoterequest_files/header2.gif" border="0" onload="this.width = screen.width; this.height= screen.heght;">

or if you want to keep the aspect ratio just do it on the width (or swap width for height):
<img src="../Meteora/quoterequest_files/header2.gif" border="0" onload="this.width = screen.width;>

If you want to do this on many images, you could have a script function instead of putting the code in the images.

Rocknrob · 12-09-2003, 12:59 PM

Thanks Again,
Ok Lazy Jim it is working but aspect ratio is not. I only have two pages that I will be making with full size images.
Heres the link again.
http://www.michaelquintonphotography...as/newhome.htm
Now I am trying to figure out what you mean with the ratio and how to get it to keep that. Where you have onload= this width what would I put in there for this? A size? Or is this the code?
Sorry I am hard at getting this.
Is there hope for me yet to understand? At least I got the one part working. lol
Robyn

altyfc · 12-09-2003, 01:47 PM

The best solution IMO is to create a version of the image that is at the size that you want it, and then just reference it normally.

Aaron

**LazyJim** · 12-09-2003, 02:15 PM

what I was saying about aspect ratio, is that when the image is enlarged, the scale stays the same, so for example if you double the width you must also double the height.

I found when you do the following, setting just the width, the height is automatically adjusted by the same factor as the width.
[code:1:1b850357dd]<img src="../Meteora/quoterequest_files/header2.gif" border="0" onload="this.width = screen.width;>[/code:1:1b850357dd]

**LazyJim** · 12-09-2003, 02:17 PM

using "altyfc"s idea is good because images lose a lot of quality when they are resized.
you would have to have several images, larg and small, to fit all common screen sizes if you wanted the imge to change to fit each end user's screen.
but ti is possible.

ATLien · 12-09-2003, 02:18 PM

Quote:

Originally Posted by LazyJim

what I was saying about aspect ratio, is that when the image is enlarged, the scale stays the same, so for example if you double the width you must also double the height.

I found when you do the following, setting just the width, the height is automatically adjusted by the same factor as the width.
[code:1:f02e2bb0bb]<img src="../Meteora/quoterequest_files/header2.gif" border="0" onload="this.width = screen.width;>[/code:1:f02e2bb0bb]

Hey that looks like something from on of my sites LOL hehehe J/K

**LazyJim** · 12-09-2003, 02:32 PM

the IMAGE resize to WINDOW width AND keep aspect ratio works with no CSS or JavaScript.
the WINDOW will resize to fit the SCREEN too.

Is that what you wanted???
[code:1:a976e5327c]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<title>Untitled Document</title>
<script language="JavaScript1.2">
window.resizeTo((screen.availWidth),(screen.availH eight));
window.moveTo(0,0);
</script>
<body bgcolor="#000000">
<img src="newhome_files/home.jpg" width="100%">
</body>
</html>
[/code:1:a976e5327c]

**LazyJim** · 12-09-2003, 02:33 PM

Quote:

Originally Posted by ATLien

Hey that looks like something from on of my sites LOL hehehe J/K

lol

Rocknrob · 12-09-2003, 03:56 PM

Quote:

Originally Posted by LazyJim

the IMAGE resize to WINDOW width AND keep aspect ratio works with no CSS or JavaScript.
the WINDOW will resize to fit the SCREEN too.

Is that what you wanted???

I can't get it to do the ratio thing.

When I try using this-
[code:1:3d1362b76c]<img src="../Meteora/quoterequest_files/header2.gif" border="0" onload="this.width = screen.width;>[/code:1:3d1362b76c] It doesn't work. I removed the Java Script too and it still wouldn't work.

I will ftp it, and then let you see what I did. ok

THis has to be a simple thing, but I wonder.

I don't want a bunch of different sizes, because I wouldn't even know where to begin there.

Still need help!

Robyn

**LazyJim** · 12-09-2003, 04:50 PM

what do u mean u can't get it to do the ratio thing, i bloody done it for you!