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

I am not sure I understand how vw/vh are related to this.

Imagine that you have some <div> in horizontal flexbox, with its width
calculated against free space (flex-grow:1) in container.
How would you define aspect ratio of width/height then?

On Wed, Mar 9, 2016 at 7:59 PM, Ricardo Souza <navas.souza@gmail.com> wrote:

> Isn't it already possible using vw/vh units?
>
>
> 2016-03-10 10:37 GMT+07:00 Andrew Fedoniouk <news@terrainformatica.com>:
>
>> 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
>>
>
>
>
> --
>
>
> *Ricky Souza*Senior Front-end / iOS Developer
> +66 9260 54344 (Bangkok, Thailand)
> rsouza.net
>
>


-- 
Andrew Fedoniouk.

http://sciter.com