Welcome to WebmasterWorld Guest from 50.17.16.177

Forum Moderators: not2easy

Message Too Old, No Replies

Scaling images to fit in div tags

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

New User

5+ Year Member

joined:Apr 17, 2007
posts:3
votes: 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

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

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts:948
votes: 4


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

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 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>

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

New User

5+ Year Member

joined:Apr 17, 2007
posts:3
votes: 0


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

Greatly appreciated

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

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts:948
votes: 4


No problem, you're welcome. ;)
1:52 pm on Apr 19, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 29, 2007
posts:1147
votes: 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?
8:35 am on Apr 28, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 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.