The image size in the browser is X number of pixels. CSS only!

Question

I am looking for a CSS-only solution to reduce the image to the size of the browser window - X pixels. I found quite a few JavaScript solutions, but I want to do this only for CSS. Can this be done, and if so, how?

Answer 1

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%
}

Answer 2

img {
    width: 100%;
}

TA-dah!!:)

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

EDIT:

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

If the margin property on the div is x pixels. Obviously, this means that you are tricking you into a div. For instance:

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

Edit again: just a note, instead of using a property marginyou can use separate properties margin-leftand margin-right. :)