Welcome to WebmasterWorld Guest from 54.167.5.15

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)

5+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



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)

5+ Year Member



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

Greatly appreciated

birdbrain

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

WebmasterWorld Senior Member 10+ Year Member



No problem, you're welcome. ;)

Dabrowski

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

WebmasterWorld Senior Member 5+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month