How do I make an image size relative to screen resolution?

CountryNaturals · 10-16-2007, 08:00 AM

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

Costin Trifan · 10-16-2007, 12:41 PM

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>

CountryNaturals · 10-16-2007, 03:14 PM

Migosh! You just bailed me out again. May I adopt you, please?

Suz

ScriptMan · 10-16-2007, 03:35 PM

Quote:

Originally Posted by CountryNaturals

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.

CountryNaturals · 10-16-2007, 03:41 PM

Thanks. I'll try it that way, too.

Suz

Taltos · 10-20-2007, 12:46 PM

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.

ScriptMan · 10-20-2007, 12:59 PM

Quote:

Originally Posted by Taltos

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.

Taltos · 10-20-2007, 01:11 PM

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

Costin Trifan · 10-21-2007, 05:55 PM

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/

ScriptMan · 10-22-2007, 07:11 AM

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.

Costin Trifan · 10-22-2007, 07:13 AM

no problem, dude! everything's cool!