Size an image to a percentage of html window

Question

Is it possible to define an image by a percentage of the document window? It's nested in several div tags, so it would be to somehow define its height% in reference to the window, rather than its parent tag. In effect, something like this...

<img src="image.jpg"  height="50% of window"/>

Answer 1

You can use the viewport's height and width.

For example, the following class will make the element half the size of the viewport.

.size {
    width: 50vw;
    height: 50vh;
}

jsFiddle Demo

This is a pure CSS3 solution, but it has some browser support issues.