DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
ae33c6c19c8d7037677b80ff6a8b7b285871bc07
yoga/docs/_docs/yoga/aspect-ratio.md
Emil Sjolander 1782646723 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
2017-01-10 06:39:41 -08:00

2.0 KiB
Raw Blame History

docid, title, layout, permalink
docid title layout permalink
aspect-ratio Aspect ratio docs /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 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 = 2;

FlexDirection = Row; AlignItems = Stretch; AspectRatio = 0.5;