|
|
Posted by dorayme on 11/11/06 21:00
In article <L4KdneG2vs40SsjYRVnyig@bt.com>,
"Chris" <nospam@btinternet.com> wrote:
> 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
Navigation:
[Reply to this message]
|