Suggestion: keep aspect ratio

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Suggestion: keep aspect ratio

Gal Weissman
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