[css3] "keep aspect ratio" feature

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:

   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()


Andrew Fedoniouk.


Received on Friday, 21 November 2008 05:29:20 UTC