Aspect Ratio #
The va-aspect-ratio is a wrapper, that may help you to view your block with the required width to height ratio.
Examples #
Default #
16/9
Lorem ipsum dolor sit amet, consectetur adipiscing elit.4/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.1/1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.With other components #
You're able to combine the va-aspect-ratio components with others. By default it's already used in va-image, but also will be useful in, for example, va-card.
4/3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| contentHeight | Wrapper height, it's used with |
|
|
| contentWidth | Wrapper width, it's used with |
|
|
| maxWidth | Maximal component's width. |
|
|
| preset | Named preset combination of component props. |
| - |
| ratio | Aspect ratio of the component's wrapper. |
|
|
Css Variables #
| Name | Default Value |
|---|---|
| --va-aspect-ratio-position | relative |
| --va-aspect-ratio-overflow | visible |