DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
097e99b6998bf98046a26e15d16a56128edf7ef1
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;