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 `flex grow`
- If `aspect ratio`, `width`, and `height` are set then the cross axis 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			`---`
Use absolute paths in links Summary: allow-large-files Reviewed By: danielbuechele Differential Revision: D7023260 fbshipit-source-id: a797d09b61530b13da10e02c21acef13c508470c 2018-02-19 02:55:30 -08:00			`path: "/docs/aspect-ratio"`
Add documentation placeholders Reviewed By: danielbuechele Differential Revision: D6968199 fbshipit-source-id: 433d81b6367d1376224e0b3516be65132c091a34 2018-02-13 03:50:31 -08:00			`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.`

Copy review Reviewed By: danielbuechele Differential Revision: D7009457 fbshipit-source-id: d5053751a2bde369a65a740c03ace5bbd2eec02f 2018-02-16 06:41:54 -08:00			The `aspect ratio` property in Yoga has the following properties:
Document aspect ratio Reviewed By: danielbuechele Differential Revision: D6976130 fbshipit-source-id: caf3cc1d1d1c00fee03ca26966fb57d1796e1604 2018-02-13 06:37:38 -08:00
			`- Accepts any floating point value > 0, the default is undefined.`
Copy review Reviewed By: danielbuechele Differential Revision: D7009457 fbshipit-source-id: d5053751a2bde369a65a740c03ace5bbd2eec02f 2018-02-16 06:41:54 -08:00			- 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.
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
			`<controls prop="aspectRatio"></controls>`