El taller de componentes: los 100 componentes de Reflex
·
Resumen del curso
Diseño
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
Tipografía
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
Formularios
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
Visualización de datos
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
Mostrar y ocultar
·
Tabs
·
Accordion
·
Segmented Control
Superposiciones
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
Renderizado dinámico
·
Cond
·
Match
·
Foreach
·
Auto Scroll
Multimedia
·
Image
·
Audio
·
Video
Tablas y cuadrículas de datos
·
Table
·
Data Table
·
Data Editor
Gráficos
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
Piezas de gráficos
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
Otras bibliotecas de gráficos
·
Plotly
·
Pyplot
Elementos HTML
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
Otras herramientas
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
rx.aspect_ratioDocumentación oficial
Pedido del taller
Reserva el hueco de la miniatura de vídeo con proporción 16:9 y que esa proporción se mantenga aunque cambie el ancho de pantalla.
rx.aspect_ratio muestra su contenido con una relación de aspecto fija. Si das a ratio el valor ancho ÷ alto, calcula la altura automáticamente a partir del ancho disponible. Se usa donde la forma no debe deformarse aunque cambie el ancho de pantalla: miniaturas, huecos para vídeo o mapas.
rx.box(
rx.aspect_ratio(
rx.center("16:9", background_color="var(--accent-4)", width="100%", height="100%"),
ratio=16 / 9,
),
width="240px",
)Prueba las propiedades
Basta con fijar el ancho de la caja exterior; la altura la decide ratio. Si eliges una proporción distinta de la original de la imagen (4:3), object_fit determina si la imagen se recorta o deja espacio libre.
Prueba las propiedades
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",
)| Propiedad | Valores | Por defecto | Uso |
|---|---|---|---|
ratio | Número (16 / 9, 4 / 3, 1) | 1 | Ancho ÷ alto. Fija la altura según esta proporción |
width height del contenido | "100%" | Ninguno | Para que llene la caja con proporción |
object_fit de la imagen | "cover" "contain" "fill" | "fill" | Si una imagen con otra proporción se recorta, deja espacio o se estira |
En ratio puedes escribir directamente la expresión de Python 16 / 9 (su valor es 1.777…).
Distintas proporciones
Este es el ejemplo de la documentación oficial. Con el mismo ancho, solo cambia la altura según la proporción. La caja interior lleva width="100%" y height="100%" para llenar la caja con proporción.
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",
)El tamaño se decide desde fuera
Si das width o height en píxeles directamente a aspect_ratio o a su contenido, la proporción se rompe. En su lugar, envuelve aspect_ratio en un rx.box, fija el ancho (o la altura) de esa caja y deja en "100%" el ancho y la altura del contenido. Abajo hay cuatro cajas del 20% de ancho con la misma imagen en proporciones distintas. Para que la imagen no se deforme, se usa object_fit="cover".
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%",
)Completar el pedido
La caja exterior sigue el ancho de pantalla hasta max_width, y la altura la marca la proporción 16:9. El botón de reproducción sobre la miniatura se superpone en el centro con 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",
)Notas del taller
rx.aspect_ratio(contenido, ratio=16 / 9) fija la proporción ancho ÷ alto.
El tamaño se decide en el rx.box exterior; el contenido lleva width y height "100%".
No des tamaños en píxeles directamente a aspect_ratio ni a su contenido.
Las imágenes llenan el espacio sin deformarse con object_fit="cover".
Recibe avisos de nuevas lecciones
Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.
R
ReflexKR
Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.
ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café
Aviso de afiliados© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
Preguntas y respuestas
Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.