W3C home > Mailing lists > Public > www-style@w3.org > March 2016

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

From: Ricardo Souza <navas.souza@gmail.com>
Date: Thu, 10 Mar 2016 10:59:27 +0700
Message-ID: <CACbW4h_D3hLjvjKKge_yfEVnRJRnFPDCDTNAAnULwYkscOt-HA@mail.gmail.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
Cc: www-style <www-style@w3.org>
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
Received on Thursday, 10 March 2016 08:57:45 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:01 UTC