Can an image be dynamically scaled using 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

"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?

<img width='100%' ...>

but why, that will distort the image.


BTW half a megabyte for that image is outrageous.

On Dec 10, 6:50*pm, "rf" <r... (AT) invalid (DOT) com> wrote:

"donpro" <donpro-2... (AT) rogers (DOT) com> wrote in message

news:171626c5-aaf1-4c88-ad7f-a248b4535d96 (AT) c1g2000yqg (DOT) googlegroups.com...

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?

img width='100%' ...

but why, that will distort the image.

BTW half a megabyte for that image is outrageous.

So simple. Works, thanks. Now can someone tell me why there is white
space between the image and the footer?

An yes, half a megabyte is high but it's what the client wants.

"donpro" <donpro-2003 (AT) rogers (DOT) com> wrote

On Dec 10, 6:50 pm, "rf" <r... (AT) invalid (DOT) com> wrote:

"donpro" <donpro-2... (AT) rogers (DOT) com> wrote in message

news:171626c5-aaf1-4c88-ad7f-a248b4535d96 (AT) c1g2000yqg (DOT) googlegroups.com...

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?

img width='100%' ...

but why, that will distort the image.

BTW half a megabyte for that image is outrageous.

So simple. Works, thanks. Now can someone tell me why there is white
space between the image and the footer?

img {vertical-align: bottom;}

An yes, half a megabyte is high but it's what the client wants.

It might be what the client wants, but is it what the clients customers
want?

When I saw the terribly slow painting of that image as it slowly downloaded
*my* initial thoughts were: OMG if they have stuffed up that image so much
what can I expect from the rest of the site, or indeed the rest of the
company.

Harsh words I know, but customers are fickle things.

On Dec 10, 7:16*pm, "rf" <r... (AT) invalid (DOT) com> wrote:

"donpro" <donpro-2... (AT) rogers (DOT) com> wrote in message

news:608a47aa-f652-4df7-b4d9-c192262c7d51 (AT) r37g2000prr (DOT) googlegroups.com...
On Dec 10, 6:50 pm, "rf" <r... (AT) invalid (DOT) com> wrote:



"donpro" <donpro-2... (AT) rogers (DOT) com> wrote in message

news:171626c5-aaf1-4c88-ad7f-a248b4535d96 (AT) c1g2000yqg (DOT) googlegroups.com...

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?

img width='100%' ...

but why, that will distort the image.

BTW half a megabyte for that image is outrageous.
So simple. *Works, thanks. *Now can someone tell me why there is white
space between the image and the footer?

img {vertical-align: bottom;}

An yes, half a megabyte is high but it's what the client wants.

It might be what the client wants, but is it what the clients customers
want?

When I saw the terribly slow painting of that image as it slowly downloaded
*my* initial thoughts were: OMG if they have stuffed up that image so much
what can I expect from the rest of the site, or indeed the rest of the
company.

Harsh words I know, but customers are fickle things.

Worked like a charm, thanks.

donpro wrote:

Worked like a charm, thanks.

Not for me on anyone else on dialup...after the long wait I'm off to
another site...

--
Take care,

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

On 2008-12-11, donpro wrote:

On Dec 10, 6:50*pm, "rf" <r... (AT) invalid (DOT) com> wrote:
....
BTW half a megabyte for that image is outrageous.
....
An yes, half a megabyte is high but it's what the client wants.

You can reduce the quality without losing much. I used
ImageMagick's convert program, and it reduced the size to 61,566
bytes. You can see it at
<http://cfaj.freeshell.org/testing/montage50q.jpg>.

The command I used was:

convert -quality 50 montage.jpg montage50q.jpg

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

On 2008-12-10, rf wrote:

"donpro" <donpro-2003 (AT) rogers (DOT) com> wrote in message
news:171626c5-aaf1-4c88-ad7f-a248b4535d96 (AT) c1g2000yqg (DOT) googlegroups.com...
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?

img width='100%' ...

but why, that will distort the image.

On what browser? Old versions of Konqueror would distort it, but I
haven't seen that happen anywhere else.

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

donpro wrote:

On Dec 10, 6:50 pm, "rf" <r... (AT) invalid (DOT) com> wrote:
"donpro" <donpro-2... (AT) rogers (DOT) com> wrote in message

news:171626c5-aaf1-4c88-ad7f-a248b4535d96 (AT) c1g2000yqg (DOT) googlegroups.com...

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?
img width='100%' ...

but why, that will distort the image.

BTW half a megabyte for that image is outrageous.

So simple. Works, thanks. Now can someone tell me why there is white
space between the image and the footer?

An yes, half a megabyte is high but it's what the client wants.

When your client expressed this want, was he aware of and taking into
consideration the consequences of doing this?