Imagens quadradas e redondas em CSS: o guia que eu queria ter lido

Nesse guia simples, porém completo, vou te mostrar como deixar qualquer imagem quadrada ou redonda em CSS.

Deixar uma imagem redonda em CSS é completamente possível.

Basta aplicar border-radius: 50% a ela. Porém se a imagem não for quadrada, ela ficará oval:

Resumidamente, uma imagem redonda é uma imagem quadrada com border-radius: 50%, nada mais, nada menos.

Então, antes de arredondar uma imagem, primeiro vou mostrar como deixá-la quadrada.

Ao assistir esse vídeo do Mario Souto, descobri que existe uma lista de erros de design no CSS.

Uma delas foi criar essa propriedade chamada border-radius que arredonda as pontas. border-radius deveria arredondas as bordas. Então o nome certo da propriedade seria corner-radius.

Curioso, né?

Mas antes, alguns avisos.

Avisos importantes sobre imagens quadradas e redondas em CSS

Esse tutorial funciona com qualquer tamanho de imagem.

Qualquer tamanho de imagem.

Porém, o ideal é que a imagem original tenha a proporção mais próxima possível de um quadrado. Isso quer dizer que quanto maior a diferença entre a largura e a altura, maior será o corte nessa imagem.

Não significa que uma imagem muito alta ou muito larga não possa ficar quadrada ou redonda em CSS. Apenas que o resultado pode não agradar tanto.

Outro ponto importante é sobre performance. Se você deixou uma imagem de 1000x200 quadrada ou redonda, em 200x200, um pedaço de 800x200 foi baixado em vão.

Você sempre tem a opção de cortar uma imagem e deixar ela redonda antes de subir no site. Basta usar um Photoshop, Gimp ou outro programa de edição. Isso vai ajudar no tempo de carregamento e experiência da página.

Se for muito trabalhoso, tente deixar ela pelo menos quadrada, isso já facilita muito. Se ainda assim não der, continue lendo que vou mostrar como fazer tudo isso com CSS.

Como deixar uma imagem e redonda em CSS

De forma resumida, o que acontece é o seguinte.

Primeiro, você precisa deixar ela quadrada. Isso pode ser feito:

• Com a propriedade aspect-ratio
• Ou com um container ao redor da imagem

O segundo e último passo é aplicar border-radius: 50% a ela.

Outra alternativa é usar o clip-path: circle(50%) para criar um recorte na imagem. A função circle() determina que esse corte será no formato de um círculo, enquanto o valor 50% informa o tamanho do raio dele.

Mas preciso dizer que a primeira opção é mais aceita pelos navegadores. Veja mais sobre o clip-path na MDN.

Deixar uma imagem redonda em CSS com a propriedade aspect-ratio

Para começar, você precisa apenas da imagem no HTML:

<img
  src="https://images.unsplash.com/photo-1686890121533-ac7aecfb15cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
  alt="doguinho"
  class="image"
/>

E no CSS:

.image {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
}

Veja a função de cada propriedade:

• width: 100%: força a imagem a ocupar todo o espaço que você deu a ela. Essa propriedade e a próxima têm relação com a responsividade
• max-width: 400px: essa propriedade é opcional. Você pode remover ou mudar o valor para se adequar ao seu caso. Se precisar, use um valor em rem. Veja mais sobre valores absolutos e relativos em CSS
• aspect-ratio: 1/1: essa é a propriedade que deixa a imagem quadrada, mas ao mesmo tempo distorce ela
• object-fit: cover: recorta a imagem e evita a distorção que a propriedade anterior causou
• border-radius: 50%: como falei no começo, essa propriedade deixa ela redonda.

Aplique essas propriedades uma a uma, e veja a magia acontecendo.

Tudo muito legal, mas preciso ser sincero. Hoje, a propriedade aspect-ratio não é TÃO aceita pelos navegadores (90%). Então essa estratégia pode não funcionar em todos os casos.

Existe outra forma de deixar uma imagem em formato circular em CSS que é usar um container.

Deixar uma imagem redonda em CSS com um container

Aqui o HTML sofre uma alteração.

Coloque duas div's ao redor da imagem, elas servem para definir a proporção e posicionamento:

<div class="container">
  <div class="inner">
    <img
      src="https://images.unsplash.com/photo-1686890121533-ac7aecfb15cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
      alt="doguinho"
      class="image"
    />
  </div>
</div>

Agora basta aplicar o estilo CSS em cada tag.

• A div de fora, que chamei de container, controla a largura da imagem
• A div interna, (inner), fica responsável tanto pelo tamanho, quanto pelo posicionamento
• Por fim, o CSS da imagem irá posicioná-la, ajustar seu tamanho, encaixe e arredondamento

Logo após o código, eu explico cada linha:

.container {
  width: 100%;
  max-width: 400px; /* opcional */
  outline: 4px dashed red; /* opcional */
}

.inner {
  position: relative;
  height: 0;
  padding-bottom: 100%;
}

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

Veja agora o que faz cada propriedade CSS da div container:

• width: 100%: força a div a ocupar todo o espaço disponível. Essa propriedade e a próxima têm relação com a responsividade
• max-width: 400px: essa propriedade é opcional. Você pode remover ou mudar o valor para se adequar ao seu caso. Se precisar, use um valor em rem. Veja mais sobre valores absolutos e relativos em CSS
• outline: serve apenas para auxiliar visualmente a encontrar o container. Quando tudo estiver pronto, você pode remover ela

A div inner também possui suas responsabilidades:

• position: relative: torna ela a referência da imagem (mais detalhes abaixo)
• height: 0: zera a altura do container. Mas então como exibir a imagem? Aplicando a próxima propriedade
• padding-bottom: 100%: mágica, tudo que você da imagem é padding, e não conteúdo. Já já eu explico com mais detalhes isso (não desista)

Para terminar, veja o CSS da imagem:

• position: absolute: posiciona a imagem em relação ao elemento pai (inner), e não aos irmãos
• width: 100% e height: 100%: preenche completamente o espaço do elemento pai, porém com distorção
• object-fit: cover: corta a imagem e remove a distorção
• border-radius: 50%: deixa ela redonda

O resultado será o mesmo que já mostrei antes:

Pronto, agora vou explicar aquilo que prometi. Viu, nem demorou 🙂

O que aconteceu com o padding-bottom?

Você se lembra da responsabilidade dessa propriedade?

Tudo que você da imagem é padding, e não conteúdo

Veja uma imagem dentro de uma div sem nenhum CSS. Quando passo o mouse sobre os elementos no DevTools, a imagem ocupa um espaço azul na tela. Isso significa que aquela região faz parte do conteúdo.

Agora, após aplicar o estilo nos containers e na imagem, ela ocupa uma região verde, ou seja, não mais o conteúdo, e sim o padding-bottom do inner.

Ao colocar um height: 30px no inner, você cria esse espaço azul que é a área de conteúdo.

Se essa explicação pareceu estranha, recomendo que você revise os conceitos de box model. Também vale a pena inspecionar a imagem no DevTools depois de pronta. Assim tudo fará mais sentido.

Depois de entender que a imagem ocupa o espaço do padding-bottom, falta um detalhe. Como consegui definir a proporção quadrada dela?

A propriedade padding-bottom com valor percentual usa como referência a largura do elemento pai. Ou seja, mesmo que seja uma propriedade do eixo vertical, ela usa como referência o eixo horizontal. Isso acontece tanto com padding-bottom, quanto com padding-top.

Então se o container tem 100px de largura, e inner tem padding-bottom: 30%, isso resultará em 30px de padding-bottom.

Logo:

• Valores abaixo de 100% geram uma imagem wide, com altura menor do que a largura
• E valores acima de 100% geram uma imagem vertical, com altura maior do que a largura

Agora veja essa linha de raciocínio: um quadrado possui lados iguais. Um número é igual ao outro quando um equivale a 100% do outro. Então, sim, você adivinhou, um padding-bottom de 100% gera uma proporção de lados iguais, ou seja, quadrada 😍.

Agora... você percebeu que todas as imagens em formato circular em CSS focam no centro dela?

É possível alterar isso.

Como mudar o ponto focal de uma imagem redonda em CSS

Pronto, o principal você já sabe. Mas pode ir além.

Arredondar ou enquadrar uma imagem corta suas pontas. Isso oculta uma região dela, enquanto exibe outra que vou chamar de foco.

Se você não escolher a parte oculta e o foco, o próprio CSS faz isso para você. E quem faz isso é a propriedade object-position. Seu valor padrão é 50% 50%, ou seja, centraliza tanto na horizontal, quanto na vertical, respectivamente. Use outros valores percentuais para mudar isso.

Outra forma mais fácil é usar palavras reservadas. Se a imagem for larga, use os valores left para focar na esquerda:

Ou right para focar na direita:

Já se a imagem for mais alta, você pode focar no topo (top):

Ou no fundo (bottom):

Veja mais sobre a propriedade object-position na MDN.

Assim, além de criar imagens redondas em CSS com estilo, você escolhe qual região quer exibir.

Callback

Uma imagem redonda é uma imagem quadrada com border-radius: 50% ou clip-path: circle(50%).

É possível deixar qualquer imagem quadrada ou em formato circular em CSS. Mas saiba que quanto menor a diferença entre a largura e a altura, melhor o resultado.

Você pode enquadrar uma imagem em CSS com a propriedade aspect-ratio: 1/1. Ou também usar a magia do padding-bottom e colocar a imagem dentro de um container com proporção 1/1.

Use a propriedade object-position para exibir uma parte específica da imagem após o corte. Caso contrário, o foco será sempre no centro.

Existe uma outra forma de deixar uma imagem redonda em CSS, que é com a propriedade background-image, e não com a tag <img />.

Já que esse modo não permite usar o atributo alt, os leitores de tela não irão identificá-la. Então só indico você a fazer isso quando a imagem for apenas um recurso visual, que não complementa em nada o conteúdo da página.

Resolvi não escrever sobre essa estratégia agora, mas é uma ótima ideia para o futuro.

Assim como outros posts aqui do blog, esse conteúdo foi escrito com muita alegria. Isso porque foi uma das grandes dúvidas que tive no início da carreira, e nunca soube como resolver. Também era difícil encontrar uma explicação completa sobre imagem quadrada, redonda, aspect-ratio, etc.

Muito obrigado pela sua leitura!

Deixe nos comentários o que achou, ou se ficou com alguma dúvida 😄