Image sizing using percentage values [Archive]

View Full Version : Image sizing using percentage values

Dave Laurie

11-26-2004, 06:55 PM

Has anyone run into a problem getting <img height="x%"/> to work? The specifications seem to say it would be valid but I can only get <img width="x%"/> to produce the desired results: ie. an image filling a certain portion of a popup window. I have tried in both Moz 1.7.3 and IE6 and had the same positive result with width and negative result with height. Strange...

Thanks for your time,

dave

mindlessLemming

11-27-2004, 01:40 AM

I had to tackle this at work yesterday -- here's the trick ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
margin:0;padding:0;
}
img {
position:absolute;
width:80%;
height:80%;
}
/* THE FOLLOWING ARE IE/PC HACKS, the surrounding comments hide it from IE mac \*/
* html body {
height:100%;
}
* html img {
height:expression( document.body.clientHeight * 0.8)
}
/* END HACKS */
</style>
</head>
<body>
<img src="test.png" alt="" />
</body>
</html>

Tested in IE 5.01, IE5.5, IE6, Opera 7.54, Mozilla 1.7 and Firefox 1.0 (all PC)

For that sample I have left the invalid IE expression hack in with the other CSS. I would advise adding that rule via a 'conditional comment' so as to keep the main CSS valid and free of proprietry hacks.
Hope that helped you out :)

Dave Laurie

12-01-2004, 07:42 PM

Thanks Mindless Lemming, that seems to work just fine.

I also followed your advice on the IE conditional comment. I read up a bit and tried to implement it but I am not sure if it is working. (which makes me wonder why the resizing works?)

I am developing the site through xml and cocoon so all of my html is within xsl stylesheets. These use 
does not make it through xml/xsl processing to the html stage.

I would guess that it needs to be there. Is there a different syntax I could use? I guess I could escape those characters in the xsl also?

Anyhoo,

Thanks a lot -- I am making progress.

dave