Welcome to WebmasterWorld Guest from 54.160.221.82

Forum Moderators: not2easy

Message Too Old, No Replies

Image inside a box

     
5:28 pm on Nov 19, 2004 (gmt 0)

New User

10+ Year Member

joined:Nov 19, 2004
posts:11
votes: 0


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 {
position: absolute;
top: 20%;
left: 20%;
width: 50%;
height: 75%;
}

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

--
leemon

12:36 am on Nov 22, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:May 20, 2004
posts:469
votes: 0


Welcome to Webmaster World! Try this.

.box {
position: absolute;
top: 20%;
left: 20%;
padding: 10px; //or whatever
border: 1px solid #000000; //or whatever
}

.image {
margin: 0px;
padding: 0px;
display: block; //these take care of any wierd whitespace issues in different browsers
}

The attribute "text-align" doesn't really work on images. Having the padding all the way around the image will "center" the image vertically and horizontally. You can't really "resize" the image to fit the box and still keep the aspect ratio. You'd have to edit the image itself, I would think. Resizing images in the HTML code isn't advisable.