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%",
)