Image size browser height - X number of pixels. CSS-only!

I'm looking for a CSS-only solution, to shrink an image to the size of the browser window - X amount of pixels. I've found quite a lot JavaScript solutions, but I want to make it CSS-only. Can it be done and i开发者_StackOverflow中文版f yes, then how?

How about this?

Live Demo

HTML:

<div><img src="http://www.google.com/images/logos/ps_logo2.png" /></div>

CSS:

div {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px
}
img {
    width: 100%
}

img {
    width: 100%;
}

Tada!! :)

Demo: http://jsfiddle.net/bqbGY/

EDIT:

div {
    left: 0px;
    margin: 15px;
    position: absolute;
}
img {
    position: relative;
    width: 100%;
}

Where the margin property on the div is x pixels. Obviously, this means wrapping you img in a div. Like so:

<div>
    <img src="" />
</div>

Edit again: Just a note, instead of using the margin property, you could use separate margin-left and margin-right properties. :)