Detecting browser resolution

P

Paithar

[H]ard|Gawd
Joined
Jul 17, 2003
Messages
1,049
Ok. I have a small problem. I have a friend that has a title picture for his website. I forget the actual size of the pic at the moment. Anyway, at resolutions of 1024x768 and up everything looks fine. the problem is when you scale down to 800x600 and (shudder) lower. The title pic is surrounded by a colored background "box" and on the higher resolutions you can see this colored box surrounding the pic but on the lower resolutions the pic extends beyond the right and left borders of the colored box.

So, without making everything in the page a set size and therefore making users with lower resoltions scroll to see the image and/or page, how can I resize this image only for lower resolutions?

I would prefer a solution using either JavaScript or PHP since I have a handle on both of those languages but am willing to try any language. I have found lots of scripts in both JavaScript and PHP to resize but none that will detect the current resolution setting and resize accordingly.
 
Paithar said:
Ok. I have a small problem. I have a friend that has a title picture for his website. I forget the actual size of the pic at the moment. Anyway, at resolutions of 1024x768 and up everything looks fine. the problem is when you scale down to 800x600 and (shudder) lower. The title pic is surrounded by a colored background "box" and on the higher resolutions you can see this colored box surrounding the pic but on the lower resolutions the pic extends beyond the right and left borders of the colored box.

So, without making everything in the page a set size and therefore making users with lower resoltions scroll to see the image and/or page, how can I resize this image only for lower resolutions?

I would prefer a solution using either JavaScript or PHP since I have a handle on both of those languages but am willing to try any language. I have found lots of scripts in both JavaScript and PHP to resize but none that will detect the current resolution setting and resize accordingly.
Click to expand...

what code are you using to generate the box? it sounds like you could fix this using just CSS.
 
Yeah, how about cutting the surrounding box off of the image, then telling your CSS file to display the image centered withing your header and define the background color of the header as the color of your current box surround. Then the surrounding box will automatically adjust to fill the header regardless of the screen resolution.

Of course, if the header image itself is larger than 800px wide, that won't help. If it is, you may want to consider sizing it down; browser sniffing for screen resolution is only going to cause you problems, expecially when you consider that someone could be running a custom res that may throw yoru script off, or have scripting turned off, or not have their browser full screen, etc.
 
something like this

<div style="padding: 10px; border: 1px #000 solid; background: #333; text-align: center;">
<img src="....../>
</div>
 
I'll try the css thing with him and see if he likes it. Thanks for the replies.
 
You must log in or register to reply here.
Back
Top