Image inside a box

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

"Abs" <abs (AT) yahoo (DOT) com> wrote

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%; }