Aspect Ratio
Componente de aspect ratio en react
<AspectRatio/>
Este componente se usa para establecer un aspect ratio en un elemento, usualmente una imagen. Puede ser usado para forzar un aspect ratio en todos sus elementos hijos (children).
Props
| Prop | Tipo | default | Descripción |
|---|---|---|---|
ratio | '1:1' | '4:3' | '3:2' | '16:9' | '2:1' | '21:9' | '3:4' | '2:3' | '9:16' | '1:2' | '9:21' | - | Aspect ratio que se aplicará a el o los elementos hijos (children). |
containInDiv | boolean | false | determina si el contenido del elemento hijo se encuentra en un div contenedor, el aspect ratio se aplicará a los hijos, no a este div. |
className | string | - | clase de estilo a aplicar al div contenedor. ocupar este prop añadirá el div contenedor. |
style | CSSProperties | - | estilo a aplicar al div contenedor. ocupar este prop añadirá el div contenedor. |
ObjectFit | 'contain' | 'cover' | 'fill' | 'scale-down' | 'cover' | Determina la forma en que se ajusta el contenido del elemento hijo a la ventana. Esto se aplica a todos los elementos hijos (children). |
children | ReactNode | ReactNode[] | - | Elementos hijos del grupo. |
Ejemplos de uso
Ejemplo básico con imagen
Aspect Ratio - Ejemplo básico
Cargando componente...
Ejemplo con múltiples ratios
Aspect Ratio - Múltiples ratios
Cargando componente...