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

On Wed, Mar 09, 2016 at 7:37 PM Andrew Fedoniouk <Andrew Fedoniouk > wrote:

>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%);

>}

I agree something that enables this would be very useful.

>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 seems too complex to me at first. Why not something more general? Such as

    <div class=“a b”></div>

    .a {font-size: 100px}

    .b {

        font-size: calc(property-value(font-size) * 2);

        width: 100%;

        height: property-value(width);

    }

>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

Received on Tuesday, 15 March 2016 14:15:07 UTC