yoga/website/contents/properties/aspect-ratio.md

---
path: "docs/aspect-ratio"
title: "Aspect Ratio"
hasPlayground: true
---

## Aspect Ratio

AspectRatio is a property introduced by Yoga and is not present as a settable
property in the css flexbox specification. Flexbox does has the notion of
aspect ratio though for things with intrinsic aspect ratio such as images.

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 FlexGrow
- If AspectRatio, Width, and Height are set then the cross dimension is overridden.

<controls prop="aspectRatio"></controls>
Add documentation placeholders Reviewed By: danielbuechele Differential Revision: D6968199 fbshipit-source-id: 433d81b6367d1376224e0b3516be65132c091a34 2018-02-13 03:50:31 -08:00			`---`
			`path: "docs/aspect-ratio"`
			`title: "Aspect Ratio"`
			`hasPlayground: true`
			`---`

Document aspect ratio Reviewed By: danielbuechele Differential Revision: D6976130 fbshipit-source-id: caf3cc1d1d1c00fee03ca26966fb57d1796e1604 2018-02-13 06:37:38 -08:00			`## Aspect Ratio`

			`AspectRatio is a property introduced by Yoga and is not present as a settable`
			`property in the css flexbox specification. Flexbox does has the notion of`
			`aspect ratio though for things with intrinsic aspect ratio such as images.`

			`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 FlexGrow`
Inline controls for docs Summary: Adding inline controls in markdown using: ``` <controls prop="flexWrap"></controls> ``` Reviewed By: emilsjolander Differential Revision: D6987150 fbshipit-source-id: 28def12df702ba5d5d5b6a83dd1cb907716d1b1c 2018-02-14 07:53:07 -08:00			`- If AspectRatio, Width, and Height are set then the cross dimension is overridden.`

			`<controls prop="aspectRatio"></controls>`