Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Layout

/

Aspectratio

Displays content with a desired ratio.

Setting the ratio prop will adjust the width or height of the content such that the width divided by the height equals the ratio. For responsive scaling, set the width or height of the content to "100%".

Widescreen 16:9
Letterbox 4:3
Square 1:1
Portrait 5:7
rx.grid(
    rx.aspect_ratio(
        rx.box(
            "Widescreen 16:9",
            background_color="papayawhip",
            width="100%",
            height="100%",
        ),
        ratio=16 / 9,
    ),
    rx.aspect_ratio(
        rx.box(
            "Letterbox 4:3",
            background_color="orange",
            width="100%",
            height="100%",
        ),
        ratio=4 / 3,
    ),
    rx.aspect_ratio(
        rx.box(
            "Square 1:1",
            background_color="green",
            width="100%",
            height="100%",
        ),
        ratio=1,
    ),
    rx.aspect_ratio(
        rx.box(
            "Portrait 5:7",
            background_color="lime",
            width="100%",
            height="100%",
        ),
        ratio=5 / 7,
    ),
    spacing="2",
    width="25%",
)
rx.flex(
    *[
        rx.box(
            rx.aspect_ratio(
                rx.image(
                    src="/logo.jpg",
                    width="100%",
                    height="100%",
                ),
                ratio=ratio,
            ),
            width="20%",
        )
        for ratio in [16 / 9, 3 / 2, 2 / 3, 1]
    ],
    justify="between",
    width="100%",
)

Displays content with a desired ratio.

Test
PropTypeDescriptionValues
ratioUnion

The ratio of the width to the height of the element

Event Triggers

No component specific event triggers

← TreemapBox →

Did you find this useful?