Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Layout

/

Aspectratio

Preserve the ratio of the components contained within a region.

rx.chakra.box(
    element="iframe",
    src="https://bit.ly/naruto-sage",
    border_color="red",
)
rx.chakra.aspect_ratio(
    rx.chakra.box(
        element="iframe",
        src="https://bit.ly/naruto-sage",
        border_color="red",
    ),
    ratio=4 / 3,
)

AspectRatio component is used to embed responsive videos and maps, etc.

PropTypeDescriptionValues
ratiofloat

The aspect ratio of the Box

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting