Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine
·
Kursüberblick
Layout
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
Typografie
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
Formulare
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
Datenanzeige
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
Auf- und Zuklappen
·
Tabs
·
Accordion
·
Segmented Control
Overlays
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
Dynamisches Rendern
·
Cond
·
Match
·
Foreach
·
Auto Scroll
Medien
·
Image
·
Audio
·
Video
Tabellen und Datengrids
·
Table
·
Data Table
·
Data Editor
Diagramme
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
Diagrammbausteine
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
Andere Diagrammbibliotheken
·
Plotly
·
Pyplot
HTML-Elemente
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
Weitere Werkzeuge
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
rx.aspect_ratioOffizielle Doku
Werkstattauftrag
Bitte den Platz für das Video-Vorschaubild im Format 16:9 anlegen, sodass das Seitenverhältnis auch bei wechselnder Bildschirmbreite erhalten bleibt.
rx.aspect_ratio zeigt seinen Inhalt in einem festen Seitenverhältnis. Gibst du ratio den Wert Breite ÷ Höhe, ergibt sich die Höhe automatisch aus der vorhandenen Breite. Du verwendest es für Vorschaubilder, Videoflächen oder Karten, also überall, wo die Form bei wechselnder Bildschirmbreite nicht verzerrt werden darf.
rx.box(
rx.aspect_ratio(
rx.center("16:9", background_color="var(--accent-4)", width="100%", height="100%"),
ratio=16 / 9,
),
width="240px",
)Props ausprobieren
Du legst nur die Breite des äußeren Behälters fest, die Höhe bestimmt ratio. Wählst du ein anderes Verhältnis als das Original des Bilds (4:3), wird das Bild je nach object_fit beschnitten oder mit Rand gezeigt.
Props ausprobieren
ratio
1.75
width
fit
rx.box(
rx.aspect_ratio(
rx.image(
src="https://picsum.photos/id/1025/400/300",
width="100%",
height="100%",
object_fit="cover",
background_color="var(--gray-4)",
),
ratio=1.75,
),
width="200px",
)| Prop | Werte | Standard | Verwendung |
|---|---|---|---|
ratio | Zahl (16 / 9, 4 / 3, 1) | 1 | Breite ÷ Höhe. Daraus ergibt sich die Höhe |
width height des Inhalts | "100%" | keiner | Damit der Inhalt die Verhältnisbox ganz füllt |
object_fit des Bilds | "cover" "contain" "fill" | "fill" | Ob ein Bild mit anderem Verhältnis beschnitten, mit Rand gezeigt oder gedehnt wird |
Für ratio kannst du den Python-Ausdruck 16 / 9 direkt schreiben (Wert 1.777…).
Verschiedene Seitenverhältnisse
Das Beispiel aus der offiziellen Doku. Bei gleicher Breite ändert sich je nach Verhältnis nur die Höhe. Die inneren Boxen füllen mit width="100%" und height="100%" die Verhältnisbox vollständig.
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",
)Die Größe wird außen festgelegt
Gibst du aspect_ratio selbst oder seinem Inhalt width · height direkt in Pixeln, geht das Verhältnis kaputt. Umschließe aspect_ratio stattdessen mit einer rx.box, lege deren Breite (oder Höhe) fest und setze Breite und Höhe des Inhalts auf "100%". Unten stecken in vier Boxen mit 20 % Breite dasselbe Bild in verschiedenen Verhältnissen. Damit das Bild nicht verzerrt wird, steht object_fit="cover" dabei.
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%",
)Auftrag erledigt
Der äußere Behälter folgt der Bildschirmbreite bis max_width, die Höhe ergibt sich aus dem Verhältnis 16:9. Der Abspielknopf liegt mit position="absolute" genau in der Mitte über dem Vorschaubild.
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",
)Werkstattnotizen
Mit rx.aspect_ratio(Inhalt, ratio=16 / 9) wird das Verhältnis Breite ÷ Höhe fixiert.
Die Größe legt eine äußere rx.box fest, der Inhalt bekommt width · height "100%".
Weder aspect_ratio noch dem Inhalt direkt Pixelgrößen geben.
Bilder mit object_fit="cover" füllen, damit nichts verzerrt wird.
Über neue Lektionen informiert werden
Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.
R
ReflexKR
Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.
ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee
Hinweis zu Affiliate-Links© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
Fragen & Antworten
Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.