Hi i'm trying to create a page that effectivley resizes according to the browser window i think it's called making it fluid i'm not sure... Anyways basically how could i overcome the problem of resizing my header image. The problem is that i have it width 100% and have created the image as say 1024x100. the problem is when the browser size becomes smaller the image gets crumpled up because it's height obviously stays at 100px while the width is obviously becoming shorter. How could i overcome this problem what size should i create the image at or what code should i use?
If your header image is 1024 there is probably not much you can do without sacrificing the quality. 90% of all web surfers use a setting of 1024 or better so I wouldn't worry about it too much. The best method is to not use such a huge logo or header image.
i can change the image size to whatever in photoshop. basically with width set at 100% if i make a small image then it becomes stretched on large window or if i make big image then height makes it look strecthed on a small window. because height doesn't change relative to width. and if i don't set the width to 100% then there will be a gap on either side of the pic? how can i solve this.
For starters, remove about 24 pixels from the width of the image. If you can't do that, then go with a background color on the container, and then use a fade effect on the first and last 12px of width on either side and have the image blend into that. The second thing would be to go with a minimum size of 1000px. That won't work in Internet Explorer 5 or 6, however (though it will work in IE 7). The link I'll be providing later in this post will show you how to do that (as well as set a maximum width as well - AND go with a fixed width fallback for IE 5/6 if scripting gets disabled or blocked by a firewall). Neither statement is true. First off, he can go with a min-width: declaration as I said earlier. Second, screen resolution is meaningless. Technically screen resolution means the number of dots per inch on the monitor (96 .dpi or 120 .dpi for Windows users, 75 .dpi or 100 .dpi for Linux users), though in this industry it gets mistaken for the number of pixels on the screen. Anyway, just because the server logs are showing a "screen resolution" of 1024x768 doesn't mean that people have their browsers set to that. A lot of people do browse at 800x600 (or 800x whatever) so they can have other apps visible, such as their chat client. A far more accurate measurement would be the browser window width, rather than the screen resolution. As i said, a minimum width will take care of this. (Oh, and the link is up above.)
I have some huge images in a header, and I did kinda what Dan says, it's a flex-width page. I set the image to center as a background image, so the sides do get chopped off at smaller browser window sizes, but the middle stays in the middle and the dimensions of the image don't change, so it doesn't look squished. I think that's the trick-- backgound images don't rezise with the browser window. Images placed in source with a % height or width do.
Many thanks for the help Dan and Stomme, what i've gone with is to use the image as the background-image for the div used a centered position. I've also min-width the page at about 600px which is fine for the image. I'm just trying to learn to fade the edges of the pic in imageready..i need to get photoshop!!! Again many thanks.
You can get GIMP for free. It does just about everything Photoshop does, and takes just as long to learn.