Scaling img as % of screen height

[Zelda123]

I am trying to set an img to be a certain percentage of my screen height. I have published a test web site. This is at www.testing.richardfisher.com

test1 works as I expect. When I change the height (in px) of the div container the img scales to the same height.

For test2 instead of defining the div height in px, I have used %. This does not work.

How can I scale the img to fill 80% of the screen? What am I doing wrong?

Help will be appreciated.

Thanks,

Richard

[seekinfox]

you can use view width unit.
width: 80vw;
it will set the img as such it will take 80% of the view-screen.

or you can set the parent of the img to 100vw;
and set img to 80%
as it will take 80% width of the parent element.

[Zelda123]

Thanks I will try this.

Richard

[Zelda123]

Thanks seekinfox. Works perfectly.