Stylesheets - Image inside a box

Author

Image inside a box

Abs

2004-11-21, 12:17 pm

Hi!

I need to put an image inside a box, centering and resizing it to fit
the box. The box is positioned and sized in the page using percent
values. The problem is that I don't know how can I do it exactly.

This is the style code for the box:

..box {
top: 20%;
left: 20%;
width: 50%;
height: 50%;
}

This is the style code for the image:

..image {
text-align: center;
?????
}

I don't know how to center the image vertically and how to resize
it to fit the box mantaining its aspect ratio. Can someone
help me, please ?

Thanks in advance

--
Abs

Harlan Messinger

2004-11-22, 11:22 pm

"Abs" <abs@yahoo.com> wrote in message news:305ugsF2s5h7eU1@uni-berlin.de...
> Hi!
>
> I need to put an image inside a box, centering and resizing it to fit
> the box. The box is positioned and sized in the page using percent
> values. The problem is that I don't know how can I do it exactly.
>
> This is the style code for the box:
>
> .box {
> top: 20%;
> left: 20%;
> width: 50%;
> height: 50%;
> }
>
>
> This is the style code for the image:
>
> .image {
> text-align: center;
> ?????
> }
>
> I don't know how to center the image vertically and how to resize
> it to fit the box mantaining its aspect ratio. Can someone
> help me, please ?

You can't specify both the height and the width AND then expect to preserve
the aspect ratio. They are mutually contradictory.

You don't need a box.

img { width: 50%; }