homepage Welcome to WebmasterWorld Guest from 54.237.184.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Image inside a box
leemon




msg:1203755
 5:28 pm on Nov 19, 2004 (gmt 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

 

jo1ene




msg:1203756
 12:36 am on Nov 22, 2004 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved