Suggestion: keep aspect ratio

Hello

I'd like to propose a new property - "maintain-aspect-ratio",
- or "keep-aspect-ratio" for elements.

This new property will calculate the initial ratio state with an element's
dimensions,
and will keep that same ratio, even when the element will be resized.

This new property will copy the ratio behaviour from the current image /
video elements, allowing *any* element in DOM to be resized accordingly.

For example:

..container {
      display:flex;
}

..container :first-child {
         flex:1;
         flex-grow:1;
         keep-aspect-ratio: true;
         /* first method */
         height (or, initial-height): 9; (or, 9px)
         width (or, initial-width): 16; (or, 16px)
         /* second method */
         ratio: (16,9);
}

The example above will maintain the first child in the container on a 16:9
ratio,
even though it is stretched flexibly and according to the parent viewport.

That will allow elements to be easily adjusted flexibly and responsively,
without JS maintenance.

Thanks!
Gal Weissman
gal@memofish.net

Received on Friday, 8 July 2016 12:02:45 UTC