homepage Welcome to WebmasterWorld Guest from 54.226.168.96
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Scaling images to fit in div tags
daveletorey




msg:3313632
 4:56 pm on Apr 17, 2007 (gmt 0)

I am creating a site which I would like to fill the browser on all computers. I am using CSS with DIV tags and set the positions using percentages, this is working fine. What I can't seem to get to work is to get the images inside the div tags to fill the tag. I've search all over and it seems to be impossible. I know that this can be done with tables, but tables don't allow me to overlap images.
Any help would be greatly appreciated even if it just to confirm that it is impossible.

Cheers Dave

 

birdbrain




msg:3314282
 5:48 am on Apr 18, 2007 (gmt 0)

Hi there daveletorey,

and a warm welcome to these forums. ;)

Here is a basic example using the webmasterworld logo above...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
height:100%;
margin:0;
padding:0;
}
#image_container {
width:50%;
height:50%;
border:3px double #999;
margin:2% auto;
}
#image_container img {
width:100%;
height:100%;
}
</style>

</head>
<body>

<div id="image_container">
<img src="http://www.webmasterworld.com/gfx/logo.png" alt="logo"/>
</div>

</body>
</html>

birdbrain

Xapti




msg:3314289
 5:57 am on Apr 18, 2007 (gmt 0)

Yep. It's as simple as that:
.image_container img {width:100%;height:100%;}
(and then of course ensure your container div has the id or class of image_container)

Any image in image container will conform to fit the div's size. I find it strange you had problems with this, because it would even work if you did this:
<div height="100px" width="100px"><img src="logo.gif" height="100%" width="100%"></div>

daveletorey




msg:3314321
 6:58 am on Apr 18, 2007 (gmt 0)

Thank you all. I actually thought I was going mad.

Greatly appreciated

birdbrain




msg:3314580
 1:05 pm on Apr 18, 2007 (gmt 0)

No problem, you're welcome. ;)

Dabrowski




msg:3315714
 1:52 pm on Apr 19, 2007 (gmt 0)

I always thought that width/height 100% on images was actual size relative to the image? Does this only work if the parent container has a size defined?

Xapti




msg:3324701
 8:35 am on Apr 28, 2007 (gmt 0)

I don't know, but I'd like to know.

One other thing... I think I've been getting strange results when sizing images with EMs, but maybe not.

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved