Scaling img as % of screen height

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

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.



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.

Thanks I will try this.


Thanks seekinfox. Works perfectly.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.