DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Update aspect ratio documentation to match changes recently made

Browse Source 
Summary: Fixes #313 https://github.com/facebook/yoga/issues/313

Reviewed By: gkassabli

Differential Revision: D4397691

fbshipit-source-id: 29daabe9a4bbde3f330e952ca5e644c7cfdbcccf
This commit is contained in:
Emil Sjolander
2017-01-10 06:26:45 -08:00
committed by Facebook Github Bot
parent 78e64e3d5b
commit 1782646723
1 changed files with 14 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/_docs/yoga/aspect-ratio.md
View File

@@ -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;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; width: 100px; height: 200px;"></div>
</div>
</div>
#### Width = 100; AspectRatio = 0.5;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; width: 100px; height: 50px;"></div>
</div>
</div>
#### FlexDirection = Row; FlexGrow = 1; AspectRatio = 0.5;
#### Width = 100; AspectRatio = 0.5;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px;">
<div class="yoga" style="background-color: #303846; width: 100px; height: 200px;"></div>
</div>
</div>
#### FlexDirection = Row; FlexGrow = 1; AspectRatio = 2;
<div class="yoga" style="align-items: flex-start;">
<div class="yoga sample" style="background-color: white; width: 300px; height: 300px; flex-direction: row;">