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
#

Name	Types	Default
contentHeight	`Number`	`1`
contentWidth	`Number`	`1`
maxWidth	`Number`	`0`
preset	`String`	-
ratio	`Number \| String`	`"auto"`

Name	Default Value
--va-aspect-ratio-position	relative
--va-aspect-ratio-overflow	visible

Aspect Ratio
#

Examples
#

Default
#

16/9

4/3

1/1

With other components
#

API
#

Props #

Css Variables #

Aspect Ratio #

Examples #

Default #

16/9

4/3

1/1

With other components #

API #

Props #

Css Variables #

Aspect Ratio
#

Examples
#

Default
#

With other components
#

API
#