Back to Yoga

Aspect Ratio

website/docs/styling/aspect-ratio.mdx

2017.02.07.001.1 KB
Original Source

import Playground from '@site/src/components/Playground';

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.

<Playground code={<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>} />