Aspect Ratio

Layout

Container that maintains a fixed width/height ratio for any child content.

Common ratios

16:9 (video)

16 : 9

1:1 (square)

1 : 1

4:3 (classic)

4 : 3

Instalação via CLI

$ npx kikitocn add aspect-ratio

Exemplo de uso

Aspect RatioExample.tsx

import { AspectRatio } from "@/components/ui/cn/aspect-ratio/AspectRatio";

export function AspectRatioExample() {
  return (
    <AspectRatio>
      Aspect Ratio
    </AspectRatio>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`React.ReactNode`	—	Conteúdo a manter proporção
`ratio`	`number`	`16/9`	Razão largura/altura (ex: 16/9)
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras (mesclado com o padding-bottom calculado)

Voltar para Layout

Carregando…