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. |