Skip to main content

Aspect Ratio

The aspect ratio property in Yoga has the following properties:

  • Accepts any floating point value > 0, the default is undefined.
  • Defined as the ratio between the width and the height of a node e.g. if a node has an aspect ratio of 2 then its width is twice the size of its height.
  • Respects the min and max dimensions of an item.
  • Has higher priority than flex grow
  • If aspect ratio, width, and height are set then the cross axis dimension is overridden.
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10,
    }}>
    <Node style={{margin: 5, height: 50, aspectRatio: 1.0}} />
    <Node style={{margin: 5, height: 50, aspectRatio: 1.5}} />
  </Node>
</Layout>