Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

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

See the full list of default event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting