AspectRatio

Proporção fixa — mantém uma caixa numa proporção fixa, como 16:9 ou 1:1, em qualquer largura. Use em vídeos, embeds, mapas e miniaturas, para o espaço ficar reservado antes de a mídia carregar e os cards de uma linha se alinharem.

Padrão CSS aspect-ratio + object-fitComponente de servidorCódigo ↗

Instalação

Configure o Camaleo uma vez (Instalação) e importe o componente. Ele não tem estado, então renderiza no servidor.

import { AspectRatio } from "@camaleo/react";

Anatomia

Uma caixa com position: relative e overflow escondido. Um img, video ou iframe filho direto ocupa a caixa toda; o resto você sobrepõe com position: absolute.

aspect-ratio <div> · aspect-ratio vindo de ratio

img · video · iframe · ocupa tudo, object-fit: cover

sua sobreposição · opcional, position: absolute

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d

**Como torrar café em casa**
Módulo 2 · Aula 4

Morros verdes ao pôr do sol, com o sol claro

ratio={16 / 9}

Escolha a proporção

Troque a proporção. ratio é a largura dividida pela altura, então escreva como fração: 16 / 9 para vídeo, 4 / 3 para fotos, 1 para quadrados, 3 / 4 para retratos.

Caneca de cerâmica com alça larga — cover: preenche a caixa e corta as bordas

cover ou contain

cover, o padrão, preenche a caixa e corta o que sobra. Use objectFit: "contain" na imagem quando todas as bordas importam, como num produto ou num logo.

Pousada da Serra

Monte Verde, MG

R$ 380 / noite

Casa do Farol

Ilhabela, SP

R$ 590 / noite

Um farol num cabo de pedras ao entardecer

Chalé Vista Mar

Ubatuba, SP

R$ 470 / noite

Cards com fotos de qualquer formato

As três fotos são 16:9, 4:3 e 3:4. Cortadas na mesma proporção, os cards ficam da mesma altura e os títulos se alinham.

Grade de miniaturas

Miniaturas quadradas formam uma grade arrumada seja qual for a foto enviada. O object-position escolhe que parte da foto sobrevive ao corte.

Rua Augusta, 1200, São Paulo

Embeds precisam de title

Um iframe ocupa a caixa como uma imagem. Dê a ele um title que diga o que tem dentro: é o nome do frame para o leitor de tela.

Casa do Farol, Ilhabela. Esta linha não sai do lugar enquanto a foto carrega.

Espaço guardado durante o carregamento

Recarregue a foto. A caixa já tem altura antes de o arquivo chegar, então o texto de baixo não pula, e uma mensagem de status avisa quando a foto aparece.

Em contexto

Mídia quase nunca aparece sozinha. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

12:48

Curso Barista em Casa · Módulo 2 · Aula 4

Como torrar café em casa

Progresso no curso9 de 15 aulas

Aula de cursoAspectRatio · IconButton · Progress · Button

Novo

Apartamento de 2 quartos em Pinheiros

68 m² · 2 quartos · 1 vaga

R$ 2.700/mês

Anúncio de aluguelCard · AspectRatio · Badge · Button

Mapa da Consolação com um marcador na Rua Augusta, a duas quadras da Avenida Paulista

Grão Cafés · Augusta

Endereço: Rua Augusta, 1200, São Paulo
Horário: Seg a sáb, das 7h às 19h
Telefone: (11) 3256-4821

Como chegar

Endereço da lojaCard · AspectRatio · DataList · Link

Boas práticas

Pousada da Serra

Casa do Farol

Chalé Vista Mar

FaçaUma proporção por linha.

Fotos de qualquer formato ficam do mesmo tamanho, e os títulos se alinham.

Pousada da Serra

Casa do Farol

Chalé Vista Mar

EviteCada foto no seu formato.

A linha fica torta, e o olho segue os buracos em vez do conteúdo.

Façacontain para logos e produtos.

As bordas deles têm significado; mostre tudo, com um pouco de respiro.

Evitecover num logo largo.

O corte arranca o nome da marca, que é justamente o que importa.

Props

PropriedadeTipoPadrãoDescrição

rationumber1Largura dividida pela altura: 16 / 9 para vídeo, 4 / 3 para fotos, 1 para um quadrado.

Todos os atributos de uma <div> passam adiante, como style e className. Defina a largura (ou deixe a grade do pai definir); a altura sempre segue a proporção.

Styling hooks

Mude o visual sem copiar o componente: use o slot ou defina a custom property no seu CSS.

Atributos

data-slot"aspect-ratio"

--cml-aspect-ratioa proporção, como número

Tokens que ele lê

Só deste componente

--cml-aspect-ratio

/* vídeo mais largo em telas grandes, mais alto no celular */
.aula [data-slot="aspect-ratio"] {
  --cml-aspect-ratio: 4 / 3;
}
@media (min-width: 48rem) {
  .aula [data-slot="aspect-ratio"] {
    --cml-aspect-ratio: 16 / 9;
  }
}

Acessibilidade

—A caixa não é interativa e não recebe foco. O Tab chega aos controles que você coloca dentro dela, como um botão de play.

Relacionados

ImageUma foto com legenda, skeleton de carregamento e substituto.AvatarUma foto pequena e redonda de uma pessoa, com iniciais quando falha.CarouselVários slides num só lugar, um de cada vez.

Esta página foi útil? · Editar esta página no GitHub