Stretch Images

Discussion in 'HTML' started by Chris, Nov 11, 2006.

  1. Chris

    Chris Guest

    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
    Chris, Nov 11, 2006
    #1
    1. Advertising

  2. Chris

    dorayme Guest

    In article <>,
    "Chris" <> 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
    dorayme, Nov 11, 2006
    #2
    1. Advertising

  3. Chris

    dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > In article <>,
    > "Chris" <> 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):
    >



    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...

    --
    dorayme
    dorayme, Nov 11, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tyrant Mikey

    How to Stretch DataGrid at Runtime?

    Tyrant Mikey, Feb 18, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    336
    Joshua Flanagan
    Feb 28, 2005
  2. Jim McGivney - Office

    Image Box - stretch

    Jim McGivney - Office, Aug 8, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    580
    Jim McGivney - Office
    Aug 8, 2005
  3. =?iso-8859-1?Q?Marcel_St=F6r?=

    table stretch entire height

    =?iso-8859-1?Q?Marcel_St=F6r?=, Nov 23, 2003, in forum: HTML
    Replies:
    5
    Views:
    7,558
    Barry Pearson
    Nov 24, 2003
  4. Lee Harris
    Replies:
    9
    Views:
    16,899
    Lee Harris
    Jan 9, 2004
  5. Joker7

    stop tables stretch

    Joker7, Mar 11, 2005, in forum: HTML
    Replies:
    1
    Views:
    576
Loading...

Share This Page