Scaling images to fit in div tags

Forum Moderators: not2easy

Message Too Old, No Replies

Scaling images to fit in div tags

daveletorey

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

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

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

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

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

Greatly appreciated

birdbrain

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

No problem, you're welcome. ;)

Dabrowski

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

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.