From 17826467234813f79c25c123af268624e0533673 Mon Sep 17 00:00:00 2001 From: Emil Sjolander Date: Tue, 10 Jan 2017 06:26:45 -0800 Subject: [PATCH] Update aspect ratio documentation to match changes recently made Summary: Fixes #313 https://github.com/facebook/yoga/issues/313 Reviewed By: gkassabli Differential Revision: D4397691 fbshipit-source-id: 29daabe9a4bbde3f330e952ca5e644c7cfdbcccf --- docs/_docs/yoga/aspect-ratio.md | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/docs/_docs/yoga/aspect-ratio.md b/docs/_docs/yoga/aspect-ratio.md index 4aa23e71..8b9ea662 100644 --- a/docs/_docs/yoga/aspect-ratio.md +++ b/docs/_docs/yoga/aspect-ratio.md @@ -5,32 +5,30 @@ layout: docs permalink: /docs/aspect-ratio/ --- -`AspectRatio` is a property introduced by Yoga. `AspectRatio` solves the problem of knowing one dimension of an element and an aspect ratio, this is very common when it comes to videos, images, and other media types. `AspectRatio` accepts any floating point value > 0, the default is undefined. `AspectRatio` can apply to either the width or the height of an item, it depends on which dimension is fixed. `AspectRatio` Also respects the `Min` and `Max` dimensions of an item. +`AspectRatio` is a property introduced by Yoga. `AspectRatio` solves the problem of knowing one dimension of an element and an aspect ratio, this is very common when it comes to videos, images, and other media types. `AspectRatio` accepts any floating point value > 0, the default is undefined. -- If an item has a `Width` set then `AspectRatio` controls the item's height. -- If an item has a `Height` set then `AspectRatio` controls the item's width. -- If an item has a `FlexBasis` set then `AspectRatio` controls the item's cross axis dimension. -- If an item's alignment is `Stretch` and its main axis is undefined then `AspectRatio` controls the item's main axis dimension. -- If an item has `FlexGrow` or `FlexShrink` set then `AspectRatio` controls the item's cross axis dimension if it is undefined. -- If both dimensions of an item are fixed then `AspectRatio` is ignored. +- `AspectRatio` is 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. +- `AspectRatio` respects the `Min` and `Max` dimensions of an item. +- `AspectRatio` has higher priority than `FlexGrow` +- If `AspectRatio`, `Width`, and `Height` are set then the cross dimension is overridden. #### Width = 100; AspectRatio = 2; -
-
-
-
-
- -#### Width = 100; AspectRatio = 0.5; -
-#### FlexDirection = Row; FlexGrow = 1; AspectRatio = 0.5; +#### Width = 100; AspectRatio = 0.5; + +
+
+
+
+
+ +#### FlexDirection = Row; FlexGrow = 1; AspectRatio = 2;