CSS aspect-ratio e object-fit, com seletor de ponto focal
Guia de CSS aspect-ratio e object-fit
CSS aspect-ratio e object-fit: demos ao vivo e Tailwind | We.Inc
Trave caixas em uma proporção com aspect-ratio e depois encaixe fotos dentro delas com object-fit cover, contain, fill, none ou scale-down. Clique para definir um ponto focal com object-position.
Duas propriedades resolvem a maioria dos problemas de tamanho de imagem. aspect-ratio: 16 / 9 faz uma caixa manter esse formato em qualquer largura, substituindo o velho truque do padding-top. object-fit decide como um img ou video preenche essa caixa: cover corta, contain deixa faixas vazias, fill estica. object-position escolhe qual parte continua visível quando o cover corta.
Referência rápida
Objetivo
CSS
Tailwind
Caixa quadrada
aspect-ratio: 1
Formato de vídeo
aspect-ratio: 16 / 9
Qualquer proporção
aspect-ratio: 4 / 3
aspect-4/3 ou aspect-[4/3]
Preencher e cortar
object-fit: cover
Mostrar tudo
object-fit: contain
Manter o topo
object-position: top
Abaixo, uma imagem de teste fica em uma caixa que você pode redimensionar. Alterne entre os cinco valores de object-fit, clique na imagem para mover o ponto focal e copie o CSS ou as classes do Tailwind. Mais abaixo: o truque do padding ao lado do aspect-ratio, embeds de vídeo responsivos e grades de cards com miniaturas uniformes.
Escolha uma proporção de caixa e um valor de object-fit. A prévia mostra exatamente o que o navegador vai cortar ou esticar.
Com cover ou none selecionado, clique em qualquer ponto da imagem de teste para definir object-position nesse ponto.
Copie o CSS gerado, ou as classes do Tailwind que fazem o mesmo trabalho.
Use as receitas de grade de cards e de vídeo abaixo quando montar layouts reais.
Sempre coloque os atributos width e height nas tags img. Os navegadores os convertem em uma proporção antes de o arquivo carregar, então o layout não pula.
Escolha cover para miniaturas e fotos de destaque, e contain para logos e fotos de produto em que nada pode ser cortado.
Se um rosto continua sendo cortado, mova o object-position na direção dele em vez de recortar o arquivo da imagem.
aspect-ratio é um formato preferido, não uma jaula. Um texto longo dentro da caixa a deixa mais alta, a menos que você defina min-height: 0 ou overflow.
Perguntas frequentes
Qual é a diferença entre aspect-ratio e object-fit?
aspect-ratio dá formato à própria caixa, em qualquer elemento. object-fit só se aplica a conteúdo substituído como img, video e canvas, e decide como esse conteúdo é desenhado dentro da caixa. Normalmente você usa os dois: aspect-ratio na imagem para fixar o formato e object-fit: cover para que a imagem a preencha.
Por que o object-fit não faz nada?
A caixa da imagem tem a mesma proporção da imagem, então não há nada para cortar ou esticar. O object-fit só mostra diferença quando a caixa tem outro formato, por exemplo uma altura fixa com width: 100%, ou um aspect-ratio diferente do arquivo.
Ainda preciso do truque do padding-top?
Não nos navegadores atuais. aspect-ratio funciona no Chrome, Edge, Firefox e Safari desde 2021. Mantenha o truque só se precisar dar suporte a navegadores mais antigos, e confira o caniuse para o seu público.
O object-fit funciona em imagens de fundo?
Não. Para fundos CSS, os equivalentes são background-size: cover ou contain, e background-position para o ponto focal. object-fit é para elementos img e video de verdade, que são melhores para imagens de conteúdo porque levam texto alt e suportam srcset.
Dá para usar aspect-ratio em uma div?
Sim. Qualquer elemento aceita. Uma div com width: 100% e aspect-ratio: 1 vira um quadrado que cresce junto com a coluna, algo útil para placeholders de mapa, avatares e skeleton loaders.
Como o navegador resolve o aspect-ratio
A proporção só entra em ação quando uma das dimensões é automática. Defina uma largura e deixe a altura como auto, e o navegador calcula a altura pela proporção. Defina largura e altura juntas e a proporção é ignorada, já que não sobra nada para calcular.
O valor auto 3 / 2 significa usar a proporção natural do elemento quando ele tem uma, como uma imagem carregada, e recorrer a 3 / 2 antes de carregar ou quando ele não tem nenhuma. É exatamente assim que os atributos width e height do img funcionam nos bastidores.
Escolhendo um ponto focal
object-position aceita os mesmos valores que background-position: palavras-chave como top ou right, porcentagens ou medidas. 50% 50% é o padrão e mantém o centro. Uma porcentagem alinha aquele ponto da imagem com o mesmo ponto da caixa, então 30% 40% mantém a área a um terço da esquerda e um pouco acima do meio.
Em um sistema de conteúdo, guarde o ponto focal de cada imagem como duas porcentagens e escreva-o em um estilo inline. Assim, todo recorte do site mantém o assunto no enquadramento, seja qual for a proporção que o layout usa.
aspect-ratio ao lado do truque do padding
Antes do aspect-ratio, uma caixa ganhava formato com padding-top em porcentagem, porque porcentagens de padding vertical são medidas em relação à largura. Funciona, mas o conteúdo precisa ser posicionado de forma absoluta dentro dela. As duas caixas abaixo são 16:9.
Antigo e novo, mesmo resultado
56.25% é 9 dividido por 16. A versão moderna precisa de uma linha só e deixa o conteúdo fluir normalmente.
Os cinco valores de object-fit na mesma foto
A imagem é 3:2 e todas as caixas são quadradas, então cada valor tem uma diferença de proporção para resolver e as diferenças ficam bem claras.
Valores de object-fit
Valor
O que acontece
Tailwind
Estica a imagem até a caixa. É o padrão para img e video. Distorce quando as proporções são diferentes.
Escala a imagem inteira para caber dentro da caixa. Deixa faixas vazias (letterboxing) quando as proporções são diferentes.
Escala a imagem para preencher a caixa e corta o excesso. Sem distorção, sem faixas, parte da imagem é cortada.
Mantém a imagem no tamanho natural e corta o que não couber. Bom para mostrar um detalhe em 1:1.
Funciona como none ou contain, o que der o menor resultado. Nunca aumenta uma imagem pequena.
fill, contain, cover, none, scale-down
A mesma imagem de 300 por 200 em cinco quadrados de 110 pixels. Observe o ponto vermelho: ele é o assunto que o cover não pode perder.
Vídeo e embeds responsivos
Um iframe no estilo YouTube que mantém 16:9
Dê ao iframe largura de 100% e um aspect-ratio. Sem div envolvendo e sem posicionamento absoluto.
Grades de cards com miniaturas uniformes
Todas as miniaturas com o mesmo formato
Os uploads chegam em todos os formatos. aspect-ratio com object-fit: cover deixa a grade organizada sem editar um único arquivo.
Classes do Tailwind para proporção e encaixe
Utilitários do Tailwind v4 (consulte a documentação da v3 se estiver em uma versão anterior)
CSS
Tailwind
aspect-ratio: 1 / 1
aspect-ratio: 16 / 9
aspect-ratio: auto
aspect-ratio: 3 / 2
aspect-3/2 (v4) ou aspect-[3/2]
object-fit: cover / contain / fill
object-cover / object-contain / object-fill
object-fit: none / scale-down
object-none / object-scale-down
object-position: center / top / bottom
object-center / object-top / object-bottom
object-position: 30% 40%
object-[30%_40%]
Estica a imagem até a caixa. É o padrão para img e video. Distorce quando as proporções são diferentes.
Escala a imagem inteira para caber dentro da caixa. Deixa faixas vazias (letterboxing) quando as proporções são diferentes.
Escala a imagem para preencher a caixa e corta o excesso. Sem distorção, sem faixas, parte da imagem é cortada.
Mantém a imagem no tamanho natural e corta o que não couber. Bom para mostrar um detalhe em 1:1.
Funciona como none ou contain, o que der o menor resultado. Nunca aumenta uma imagem pequena.
Playground de proporção, encaixe e ponto focal
Imagem de origem (3:2). Clique nela, ou dê foco e use as setas do teclado, para definir o ponto focal.
Definir ponto focal, agora {pos}
Paisagem de teste com um ponto vermelho como assunto
Voltar ao centro
Resultado em uma caixa {ratio} com object-fit: {fit}
Proporção da caixa
O ponto focal importa mais com cover e none. Com contain ou scale-down, ele decide onde ficam as faixas vazias.
Copiar CSS
Copiar classes
Precisa do tamanho exato em pixels para uma proporção? Use a