By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,665 Members | 1,513 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,665 IT Pros & Developers. It's quick & easy.

Image inside a box

P: n/a
Abs
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
Jul 21 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a

"Abs" <ab*@yahoo.com> wrote in message news:30*************@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%; }

Jul 21 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.