Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Stretch Images

Reply
Thread Tools

Stretch Images

 
 
Chris
Guest
Posts: n/a
 
      11-11-2006
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


 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      11-11-2006
In article <(E-Mail Removed)>,
"Chris" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      11-11-2006
In article
<(E-Mail Removed)>,
dorayme <(E-Mail Removed)> wrote:

> In article <(E-Mail Removed)>,
> "Chris" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Image Box - stretch Jim McGivney - Office ASP .Net 0 08-08-2005 02:53 PM
How to Stretch DataGrid at Runtime? Tyrant Mikey ASP .Net 1 02-28-2005 01:56 AM
Age old question: How to make an image stretch to 100% of window Lee Harris HTML 9 01-09-2004 12:07 AM
table stretch entire height =?iso-8859-1?Q?Marcel_St=F6r?= HTML 5 11-24-2003 10:18 AM
On the home stretch of my MCSE Rick MCSE 2 11-09-2003 06:17 PM



Advertisments