css set size relative to page inside div

I have a code like this;

<div>
    <img style="max-width:90%" src="..." />
</div>

Which results in开发者_StackOverflow社区 a div with the size of the original image, and the image being pressed together.

So, if the original image width was 100 pixels, the displayed image is only 90 pixels wide.

I know why it happens; setting the css with a % will refer to the parenting block's width.

What I want to know is; how do I make it refer to the page, instead of to the div?

My solution would be making JavaScript which would check the page width, and set the width in pixels (after calculating what 90% of the page width is)... but I'd guess it ought to be easier.

Edit: for the record, this would be my JS solution;

<script>
    var maxw = 0.5*screen.availWidth;
    var maxh = 0.5*screen.availHeight;

    document.write('<style type="text/css">#lightboxImage { max-width:' + maxw + 'px; max-height: '+maxh+'px; } </style>');
</script>

<div style="width:100%;">
<img src="http://www.website.com/image.jpg" style="max-width:50%;/>
</div>

If you set the size of the containing div to 100% then the max-width: of your image will calculate 50% of the whole page.

You can float the containing div or use position:absolute to place it where you like and take it out of the flow of the page (so it doesn't push all of your content out of its way)