Welcome to WebmasterWorld Guest from 54.196.238.210

Forum Moderators: not2easy

Message Too Old, No Replies

Image inside a box

     

leemon

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

10+ Year Member



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

jo1ene

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

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month