We have a “Media” component in our design system which assigns the aspect ratio to a property.
Properties
Aspect Ratio
: 1:1 | 5:4 | 4:3 | 3:2 | 16:9 | 2:1 | 21:9
Orientation
: Horizontal | Vertical
When we create an instance of this component, resizing works and the aspect ratio remains locked. Using the Aspect Ratio
property works as expected. However, if the component is resized, then the Aspect Ratio
property seems to break. It will make the instance resize to an arbitrary aspect ratio based on the width of the instance and the height of the variant for said property. If you simply click the edge or a corner as if to resize it, the instance updates to the appropriate aspect ratio.