1

I'm trying to re-size an image according to different browser sizes. I'm using this code:

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5;

But it works if I'm not using DOCTYPE, if I use DOCTYPE in my html file, then it doesn't work. Someone said:

In using a valid DTD attribute values must have units...

So I tried to add percentage unit %:

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5 + "%";

but it doesn't work, and it only works with px unit instead:

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5 + "px";

How can I make work with % unit as it works with px unit? Is that even possible?

Brian Mains
  • 50,520
  • 35
  • 148
  • 257
XO39
  • 481
  • 2
  • 9
  • 22
  • If you are taking the clientHeight of the body, the result is in pixels (px). If you multiply that by 0.5, the result is half the number of pixels. Why would you want to turn that number into a percentage? – Travesty3 Feb 28 '12 at 17:24
  • @Travesty3: I'm not really trying to turn *px* into percentage *%*, I only want to set the image size to 50% of the window size. – XO39 Feb 28 '12 at 17:33
  • 1
    The last bit of your code should pretty much do that. The most foolproof way that I've used so far has been using `document.documentElement.clientHeight`, which has proven to me to be the most cross-browser compatible way of checking it. Keep in mind that your solution may not work as you expect if the body grows taller than the window (with scrollbars). – Travesty3 Feb 28 '12 at 17:44
  • dupe: http://stackoverflow.com/questions/1622027/percentage-height-html-5-css – Dagg Nabbit Feb 28 '12 at 17:45
  • @GGG: That's not the same thing. – XO39 Feb 28 '12 at 17:57

2 Answers2

3

In this context, JavaScript supports … strings.

Your problem is almost certainly down to what height: 50% (for some value of 50) means.

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

If the height of the parent element resolves to height: auto then any percentage height will also resolve to auto.

If you want a percentage height to apply then you need to set the height of the parent element to something else. If you set it to a percentage, then you need to set the grandparent's height, and so on (until you hit the viewport, which is considered to have a pixel height).

That said, getting the height of the body in pixels, halving that, then sticking a % on the end sounds like a very odd calculation to be making.

If the browser is 100px high, then the element will be 50% of that.

If the browser is 300px high, then the element will be 100% of that.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks Quentin. As I mentioned on my comment to Travesty3 above, all I want is to set the size of the image to 50% of window's both width and height. – XO39 Feb 28 '12 at 17:36
1

This is the solution that seems to have worked for the OP:

document.getElementById("myImg").style.height = document.documentElement.clientHeight * 0.5 +"px";
Travesty3
  • 14,351
  • 6
  • 61
  • 98