Stretch Images

[Chris]

My management want a Microsoft style home page but with a fluid percentage
driven layout, which has a big image(s) where the content normally goes.
What is the best way of stretching that image so it fits neatly in different
browser sizes. I don't want to go down the javascript browser detection
route as we are aiming for WSC accessiblity (at a minimum the lowest
priority) and one of the guideline asks for the site to work without
javascript.

Is there a stretchy fluid css solution in which the image will not pixelate.
I assume scaling down a big image will work better.

Regards, Chris

 

[dorayme]

My management want a Microsoft style home page but with a fluid percentage
driven layout, which has a big image(s) where the content normally goes.
What is the best way of stretching that image so it fits neatly in different
browser sizes. I don't want to go down the javascript browser detection
route as we are aiming for WSC accessiblity (at a minimum the lowest
priority) and one of the guideline asks for the site to work without
javascript.

Is there a stretchy fluid css solution in which the image will not pixelate.
I assume scaling down a big image will work better.

Yes, you can do this. And, yes, scaling down is the way to go,
work to try to avoid most people at least scaling up. I will give
you a procedure I use to cope with text size settings or changes
by the user and you might adapt to % (in which case you better
ignore any stuf about height):

1. Make an image that looks right on a page that has been clicked
up text-size-wise a few times (but don't exaggerate, be
realistic).

2.<img src...> it in the html with the correct pixel dims.

<img src="" width="527" height="174" alt="">

3. <img src...> it again in the html (for comparison and test
only) but this time with css and no html dims.

<img style="width: 4em; height: 3.3em" src="" alt="">

In other words, you need to do a bit of testing, a simple
proportion sum. You can leave one of the dims out, width or
height and that saves the maths. But I put in both though I never
in practice see any difference. You can hive off the css to a
separate sheet, eg if the <img> is in an h1 and it is the only
example, simply <img src="" alt=""> in the html and h1 img
{width:4em" ...} in the css.

 

[dorayme]

Yes, you can do this. And, yes, scaling down is the way to go,
work to try to avoid most people at least scaling up. I will give
you a procedure I use to cope with text size settings or changes
by the user and you might adapt to % (in which case you better
ignore any stuf about height):

I should add that if you are going to do this to fit browser
widths, you will be getting into possibly unwisely big files. So,
with this in mind, there is another thing you should be aware of,
if you do it right, you can make a repeating horizontally bg
image. Now, of course, everything depends on design. With the
right "small width" pic that repeats, you can avoid having to put
stuff that repeats anyways into one big pic... think big sky,
railway tracks going on and on...