Can an image be dynaically scaled sing CSS?

Please look at: https://testbed.odysseyshipping.com

See the large graphic? It's contained within a DIV. I don't want to
set fixed width/height using HTML. I'd rather that the image just
expand or contract (in this case, the latter) to fill the DIV without
creating a horizontal scroll bar. Can this be done with CSS or do I
have to go to JavaScript?

The goal is for the image to populate the entire content, <DIV> so
that there is no white space surrounding it. I also see that there's
some white space between the image bottom and the border, not sure
why, but I'll deal wit that after.

Thanks,
Don

On 2008-12-10, donpro <donpro-2003 (AT) rogers (DOT) com> wrote:

Please look at: https://testbed.odysseyshipping.com

See the large graphic? It's contained within a DIV. I don't want to
set fixed width/height using HTML. I'd rather that the image just
expand or contract (in this case, the latter) to fill the DIV without
creating a horizontal scroll bar. Can this be done with CSS or do I
have to go to JavaScript?

You can set its width and height as percentages.

Ben C wrote:

On 2008-12-10, donpro <donpro-2003 (AT) rogers (DOT) com> wrote:
Please look at: https://testbed.odysseyshipping.com

See the large graphic? It's contained within a DIV. I don't want to
set fixed width/height using HTML. I'd rather that the image just
expand or contract (in this case, the latter) to fill the DIV without
creating a horizontal scroll bar. Can this be done with CSS or do I
have to go to JavaScript?

You can set its width and height as percentages.

But *don't*

1) typically looks really lousy
2) wastes bandwidth because of the oversize image that is required to
make it look halfway decent.

Better approach is to use fragments that can be placed in relative
corners with a plain background that can gives the appearance of a
single image that just fits the canvas without the whole canvas a huge
image...creative approaches are far more effective then brute force...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On 2008-12-11, Ben C wrote:

On 2008-12-10, donpro <donpro-2003 (AT) rogers (DOT) com> wrote:
Please look at: https://testbed.odysseyshipping.com

See the large graphic? It's contained within a DIV. I don't want to
set fixed width/height using HTML. I'd rather that the image just
expand or contract (in this case, the latter) to fill the DIV without
creating a horizontal scroll bar. Can this be done with CSS or do I
have to go to JavaScript?

You can set its width and height as percentages.

Setting both is problematic. How do you maintain the correct
aspect ratio?

I ususally set only the width, and let the browser determine the
height. (This didn't work on older versions of Konqueror; it only
adjusted the width, and left the height as is.)

I find it possible to create fairly compact images that scale well
in a browser.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Chris F.A. Johnson wrote:

On 2008-12-11, Ben C wrote:
On 2008-12-10, donpro <donpro-2003 (AT) rogers (DOT) com> wrote:
Please look at: https://testbed.odysseyshipping.com

I'd rather that the image just
expand or contract (in this case, the latter) to fill the DIV without
creating a horizontal scroll bar.

You can set its width and height as percentages.

Setting both is problematic. How do you maintain the correct
aspect ratio?

img {width:100%; height:auto;}

--
Berg

On 2008-12-11, Bergamot wrote:

Chris F.A. Johnson wrote:
On 2008-12-11, Ben C wrote:
On 2008-12-10, donpro <donpro-2003 (AT) rogers (DOT) com> wrote:
Please look at: https://testbed.odysseyshipping.com

I'd rather that the image just
expand or contract (in this case, the latter) to fill the DIV without
creating a horizontal scroll bar.

You can set its width and height as percentages.

Setting both is problematic. How do you maintain the correct
aspect ratio?

img {width:100%; height:auto;}

Which is not setting both as percentages (which is what I was
commenting on).

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Chris F.A. Johnson wrote:

On 2008-12-11, Bergamot wrote:
Chris F.A. Johnson wrote:
On 2008-12-11, Ben C wrote:
On 2008-12-10, donpro <donpro-2003 (AT) rogers (DOT) com> wrote:
Please look at: https://testbed.odysseyshipping.com

I'd rather that the image just
expand or contract (in this case, the latter) to fill the DIV without
creating a horizontal scroll bar.

You can set its width and height as percentages.
Setting both is problematic. How do you maintain the correct
aspect ratio?
img {width:100%; height:auto;}

Which is not setting both as percentages (which is what I was
commenting on).

You should *not* set both, unless you don't care about distortion, or
the container is already proportionate to the image dimensions, but
that's unlikely.

--
Berg

On 2008-12-12, Bergamot wrote:

Chris F.A. Johnson wrote:
On 2008-12-11, Bergamot wrote:
Chris F.A. Johnson wrote:
On 2008-12-11, Ben C wrote:
On 2008-12-10, donpro <donpro-2003 (AT) rogers (DOT) com> wrote:
Please look at: https://testbed.odysseyshipping.com

I'd rather that the image just
expand or contract (in this case, the latter) to fill the DIV without
creating a horizontal scroll bar.

You can set its width and height as percentages.
Setting both is problematic. How do you maintain the correct
aspect ratio?
img {width:100%; height:auto;}

Which is not setting both as percentages (which is what I was
commenting on).

You should *not* set both, unless you don't care about distortion, or
the container is already proportionate to the image dimensions, but
that's unlikely.

My point exactly.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)