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.
Open in GitHub

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.
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
contentHeight

Number

1

contentWidth

Number

1

maxWidth

Number

0

preset

String

-

ratio

Number | String

"auto"

Css Variables #

NameDefault Value
--va-aspect-ratio-position relative
--va-aspect-ratio-overflow visible