Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 10-16-2007, 08:00 AM
CountryNaturals's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 09-26-07
Location: California
Posts: 144
iTrader: 0 / 0%
How do I make an image size relative to screen resolution?

When I change my screen resolution, my table widths change because I have them set to %, but my logo stays the same. I'm switching from tables to css and I've seen some templates where the top banner expands and contracts with different screen resolutions, but I can't figure out how they did it and I can't find anything about it in my new Dreamweaver docs. Is this something super complicated? I can use the free template that has that feature if I have to, but I'd rather design my own if I can. Thanks in advance for pointing me in the right direction.

Suz
 
Reply With Quote
  #2 (permalink)  
Old 10-16-2007, 12:41 PM
kos's Avatar
kos kos is offline
Coding Tiger
Latest Blog:
Happy New Year 2013

 
Join Date: 04-13-07
Location: .ro
Posts: 4,029
iTrader: 3 / 100%
Example:
Code:
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Image Resizing</title> </head> <body> <table style="width: 100%;"> <tr> <td style="width: 100%; height: 200px;"> <img src="TheImage.jpg" style="width: 100%; height: 100%;" /> </td> </tr> </table> </body> </html>

 
Reply With Quote
  #3 (permalink)  
Old 10-16-2007, 03:14 PM
CountryNaturals's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 09-26-07
Location: California
Posts: 144
iTrader: 0 / 0%
Migosh! You just bailed me out again. May I adopt you, please?

Suz
 
Reply With Quote
  #4 (permalink)  
Old 10-16-2007, 03:35 PM
ScriptMan's Avatar
Super Moderator
 
Join Date: 02-10-07
Location: Central Kentucky
Posts: 12,014
iTrader: 4 / 100%
Quote:
Originally Posted by CountryNaturals View Post
Migosh! You just bailed me out again. May I adopt you, please?

Suz
The only problem with that method is that expanding an image can make it fuzzy and it may not look the way you want when someone with 1900w resolution views it.

Another approach is to keep your image size the same floated in a div with the same background color as the image BG. This way your image stays clear and sharp, only the space around it increases.

BTW, that [] was caused by a word 1/2 symbol.
__________________
SEO does not mean Spam Everywhere Online
Scriptman's Playhouse || Ramblings from an old man
 
Reply With Quote
  #5 (permalink)  
Old 10-16-2007, 03:41 PM
CountryNaturals's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 09-26-07
Location: California
Posts: 144
iTrader: 0 / 0%
Thanks. I'll try it that way, too.

Suz
 
Reply With Quote
  #6 (permalink)  
Old 10-20-2007, 12:46 PM
Taltos's Avatar
v7n Mentor
Latest Blog:
None

 
Join Date: 11-22-06
Location: Phoenix, AZ
Posts: 1,795
iTrader: 0 / 0%
Scriptman went the route I tend to go with one exception. I use an image that will fill my header width out to at least 1600 pixels and float it in a div or center it in a div. Whether I float or center depends on the content of the image and what part of it I consider more important. You also need to style the div with overflow: hidden.
__________________
Experimenting
 
Reply With Quote
  #7 (permalink)  
Old 10-20-2007, 12:59 PM
ScriptMan's Avatar
Super Moderator
 
Join Date: 02-10-07
Location: Central Kentucky
Posts: 12,014
iTrader: 4 / 100%
Quote:
Originally Posted by Taltos View Post
I use an image that will fill my header width out to at least 1600 pixels and float it in a div or center it in a div. .
It guys like you that are going to force me to buy a new monitor.

I'm happy at 1024 with this old one.
__________________
SEO does not mean Spam Everywhere Online
Scriptman's Playhouse || Ramblings from an old man
 
Reply With Quote
  #8 (permalink)  
Old 10-20-2007, 01:11 PM
Taltos's Avatar
v7n Mentor
Latest Blog:
None

 
Join Date: 11-22-06
Location: Phoenix, AZ
Posts: 1,795
iTrader: 0 / 0%
LMAO...that's good! I was doing the 1600+ pixel wide stuff in 1024 X 768 but I do finally have a laptop that will do 1900 x 1200. I don't run it that high usually but I do finally have it
__________________
Experimenting
 
Reply With Quote
  #9 (permalink)  
Old 10-21-2007, 05:55 PM
kos's Avatar
kos kos is offline
Coding Tiger
Latest Blog:
Happy New Year 2013

 
Join Date: 04-13-07
Location: .ro
Posts: 4,029
iTrader: 3 / 100%
My code was just a response to her question. As you can see, Scriptman, I didn't provided my personal consideration about that example.

I never add a floating image into my page header, because I'm just not happy with that technique...If I decide to have just one image as a banner then it will be set in the css as a background image. But if I decide to have 2 images to be used for the banner, then I'll set one as a background image for the page header container and the second image as a background image for the inner container.
This will explain better. http://blogs.msdn.com/mswanson/

 
Reply With Quote
  #10 (permalink)  
Old 10-22-2007, 07:11 AM
ScriptMan's Avatar
Super Moderator
 
Join Date: 02-10-07
Location: Central Kentucky
Posts: 12,014
iTrader: 4 / 100%
Costin

My reply was just meant to explain the effects of the action because I had first hand knowledge that the OP might never actually see the result of doing it that way. The OP does not use that resolution.

With some of the resolutions out there now, I personally don't believe anyone wants a 100% fluid format.
__________________
SEO does not mean Spam Everywhere Online
Scriptman's Playhouse || Ramblings from an old man
 
Reply With Quote
  #11 (permalink)  
Old 10-22-2007, 07:13 AM
kos's Avatar
kos kos is offline
Coding Tiger
Latest Blog:
Happy New Year 2013

 
Join Date: 04-13-07
Location: .ro
Posts: 4,029
iTrader: 3 / 100%
no problem, dude! everything's cool!
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 2 (0 members and 2 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Getting Body Background to Adjust to Screen Size/resolution hbixler03 Coding Forum 5 03-16-2008 08:39 AM
screen resolution is an amazing 280X900 TheFriend Forum Lobby 8 01-23-2008 12:36 AM
Web page and screen resolution... ewomack Web Design Lobby 9 03-23-2007 08:04 AM
What screen resolution do you optmize for? atomicstomp Web Design Lobby 17 12-23-2003 02:59 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 06:02 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.