Re: [css3] "keep aspect ratio" feature

On Thu, Nov 20, 2008 at 11:28 PM, Andrew Fedoniouk <
news@terrainformatica.com> wrote:

>
> Time to time I am getting feature request to provide
> "keep aspect ratio" functionality in CSS.
>
> Here is a simple idea of how aspect ratio could be done
> without changing too much in CSS:
>
> To declare function 'width(NN%)' that can be used as a value of
> height, min-height, max-height CSS attributes. Thus it would
> be possible to define element that keeps its aspect ratio simply as:
>
> #my-golden-ratio
> {
>  width: 30%;
>  height: width(62%);
> }
>
> where width takes 30% of content box of #my-golden-ratio parent
> and height of the element will be set to 62% of its computed width.
>
> Optional part:
>
> In principle use of this width() can be expanded on other vertical
> length attributes of the element: margin-top/bottom, border-top/bottom and
> padding-top/bottom. And list of functions similar to the width()
> can be expanded to:
>  margin-left(), margin-right()
>  border-left(), border-right()
>  padding-left(), padding-right()
>

I like the idea, and think it could be a valuable addition.  As well, in
this simple form it avoid the circular-dependency issues that plague more
general solutions.

There's no reason for the margin/border/padding versions of the properties,
though.  Margin and padding % values depend on the width of the containing
block no matter what, so you can maintain an aspect ratio on them simply by
setting % values with the ratio you want.  Border doesn't allow % at all (it
only takes length values), and so there's no way to vary the border width
and thus any aspect ratios are hardcoded.  If it *did* allow %s, though, it
would certainly work the same as margin and padding.

~TJ