Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

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.

PropTypeDefault ValueValues
ratio
float

Event Triggers

See the full list of default event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting