ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Layout

Aspect Ratio

rx.aspect_ratio

Official docs

Workshop order

Reserve a 16:9 slot for the video thumbnail, and keep that ratio even when the screen width changes.

rx.aspect_ratio shows its content at a fixed width-to-height ratio. Give ratio the value of width ÷ height, and it works out the height to match the given width. Use it wherever the shape must not get squashed as the screen width changes: thumbnails, video slots, maps.

16:9

rx.box(
    rx.aspect_ratio(
        rx.center("16:9", background_color="var(--accent-4)", width="100%", height="100%"),
        ratio=16 / 9,
    ),
    width="240px",
)

Try the props

Set only the width of the outer box, and ratio decides the height. Pick a ratio different from the image's original (4:3), and object_fit decides whether the image is cropped or letterboxed.

ratio 1 is a square, around 1.75 is 16:9 (1.78), 0.75 is a tall 3:4. object_fit cover crops to fill, contain shows the whole image.

Prop	Values	Default	Use
`ratio`	number (`16 / 9`, `4 / 3`, `1`)	`1`	Width ÷ height. The height is set from this ratio
`width` `height` of the inner content	`"100%"`	none	Fill the ratio box
`object_fit` of an image	`"cover"` `"contain"` `"fill"`	`"fill"`	Whether an image with a different ratio is cropped, letterboxed or stretched

You can write the Python expression 16 / 9 directly in ratio (its value is 1.777…).

Various ratios

This is the official docs example. Within the same width, only the height changes with the ratio. The inner boxes get width="100%" and height="100%" to fill the ratio box.

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="160px",
)

Size is set from outside

Give aspect_ratio itself or its content a width · height in pixels and the ratio breaks. Instead, wrap aspect_ratio in an rx.box, set that box's width (or height), and leave the content's width and height at "100%". Below, four boxes 20% wide each hold the same image at different ratios. object_fit="cover" keeps the image from getting squashed.

rx.flex(
    *[
        rx.box(
            rx.aspect_ratio(
                rx.image(
                    src="https://picsum.photos/id/237/400/400",
                    alt="Dog",
                    width="100%",
                    height="100%",
                    object_fit="cover",
                ),
                ratio=ratio,
            ),
            width="20%",
        )
        for ratio in [16 / 9, 3 / 2, 2 / 3, 1]
    ],
    justify="between",
    align="start",
    width="100%",
)

Filling the order

The outer box follows the screen width up to max_width, and the 16:9 ratio sets the height. The play button on the thumbnail is overlaid dead center with position="absolute".

rx.box(
    rx.aspect_ratio(
        rx.box(
            rx.image(
                src="https://picsum.photos/id/1039/800/450",
                alt="Waterfall",
                width="100%",
                height="100%",
                object_fit="cover",
            ),
            rx.center(
                rx.icon("play", size=28, color="white"),
                width="56px",
                height="56px",
                border_radius="9999px",
                background_color="rgba(0, 0, 0, 0.55)",
                position="absolute",
                top="50%",
                left="50%",
                transform="translate(-50%, -50%)",
            ),
            position="relative",
            width="100%",
            height="100%",
            border_radius="8px",
            overflow="hidden",
        ),
        ratio=16 / 9,
    ),
    width="100%",
    max_width="420px",
)

Workshop notes

rx.aspect_ratio(content, ratio=16 / 9) locks the width ÷ height ratio.
Set the size on an outer rx.box and give the content width · height "100%".
Don't give aspect_ratio or its content pixel sizes directly.
Fill images with object_fit="cover" so they don't get squashed.

← Previous

Layout · Inset

Layout · Fragment

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.

Questions & answers

Ask anything about this lesson. Questions from every language version of this page appear together.

ReflexKR

Learn Python and Reflex by doing. Every example was run and verified on Reflex 0.10.0.

ReflexKR is free, with no banner ads. If it helped you, you can support it with a coffee. ☕ Buy us a coffee

Affiliate disclosure

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex