Exibição

Aspect Ratio

Container que mantém uma proporção fixa (aspect ratio).

Uso

Use o elemento <y-aspect-ratio> no seu HTML:

html
<y-aspect-ratio ratio="16/9">  <img src="/placeholder.jpg" alt="Imagem" style="object-fit: cover; width: 100%; height: 100%;" /></y-aspect-ratio>

Exemplos

16:9

16:9

Propriedades

PropriedadeTipoPadrãoDescrição
ratiostring"16/9"Proporção (ex: 16/9, 4/3, 1/1)

Importação

Importe todos os componentes ou apenas este:

typescript
// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/aspect-ratio.js';

Acessibilidade

  • Suporta navegação por teclado
  • Utiliza atributos ARIA apropriados
  • focus-visible para indicação de foco