width(<percent>) and height(<percent>) functions

If will have such functions then following scenarios will become feasible:

To define aspect ratio:

div { width: 100%;
       height: width(50%); /* 2:1 aspect ratio */ }

To define line-height always match defined height:

input {
   width: auto;
   height: 1.4em;
   line-height: height(100%);
}

width(<percent>) and height(<percent>) are non symmetrical in the sense
that:

width(<percent>), when used in height related properties ( e.g. height,
line-height ), uses computed width of the element. Otherwise it gets
calculated against defined width if it is defined in <length> or evaluated
to 'auto'.

and height(<percent>), if used not in height property, always calculated
against declared height if it is given in <length> units. In all other
cases it gets used as 'auto'.

This will help to solve ugly "solutions" like this one for example:

http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css


-- 
Andrew Fedoniouk.

http://sciter.com