Imagens quadradas e redondas em CSS: o guia que eu queria ter lido
Tags: css, imagemredonda, imagemquadrada, formatoimagem
Published: 2023-06-22 12:03:32

## 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:
 
![um código html e css ao lado da imagem oval de um cachorro](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346697-imagem-ovalada.png%3Fauto%3Dformat&w=3840&q=75)
 
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](https://www.youtube.com/watch?v=HNjkqONzGS0&ab_channel=MarioSouto-DevSoutinho), descobri que existe uma [lista de erros de design no CSS](https://wiki.csswg.org/ideas/mistakes).
 
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.
 
![imagem retangular horizontal de um cachorro recortada em formato circular destacando as laterais cortadas](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346724-laterias-cortadas.png%3Fauto%3Dformat&w=3840&q=75)
 
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**.
 
![imagem retangular vertical de uma rua recortada em formato circular destacando topo e fundo cortados](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346740-topo-e-fundo-cortados.png%3Fauto%3Dformat&w=3840&q=75)
 
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](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path).
 
### Deixar uma imagem redonda em CSS com a propriedade aspect-ratio
 
Para começar, você precisa apenas da imagem no HTML:
 
```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:
 
```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](https://demenezes.dev/posts/valores-absolutos-relativos-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.
 
![código html e css ao lado da imagem de um cachorro em formato arredondado](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346785-z-aspeect-ratio.png%3Fauto%3Dformat&w=3840&q=75)
 
Tudo muito legal, mas preciso ser sincero. Hoje, a propriedade `aspect-ratio` não é TÃO aceita pelos navegadores ([90%](https://caniuse.com/?search=aspect-ratio)). 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:
 
```html
<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:
 
```css
.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](https://demenezes.dev/posts/valores-absolutos-relativos-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:
 
![código html e css ao lado da imagem de um cachorro em formato arredondado com um pontilhado ao redor mostrando o container](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346802-z-container.png%3Fauto%3Dformat&w=3840&q=75)
 
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**.
 
![imagem em html ocupando a área de conteúdo de uma div](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346814-z-conteudo.png%3Fauto%3Dformat&w=3840&q=75)
 
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`.
 
![imagem em html ocupando a área de padding de uma div](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346826-z-padding.png%3Fauto%3Dformat&w=3840&q=75)
 
Ao colocar um `height: 30px` no `inner`, você cria esse espaço azul que é a área de conteúdo.
 
![imagem em html ocupando a área de padding de uma div com uma pequena área de conteudo no topo](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346841-z-height.png%3Fauto%3Dformat&w=3840&q=75)
 
Se essa explicação pareceu estranha, recomendo que você revise os conceitos de [box model](https://demenezes.dev/posts/css-box-model-elementos-tamanhos-inesperados/). 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.
 
![imagem retangular horizontal de um cachorro recortada em formato circular destacando que o foco do corte é no centro](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346861-z-foco-h.png%3Fauto%3Dformat&w=3840&q=75)
 
![imagem retangular vertical de uma rua recortada em formato circular destacando que o foco do corte é no centro](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346868-z-f-v.png%3Fauto%3Dformat&w=3840&q=75)
 
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:
 
![imagem retangular horizontal de um cachorro recortada em formato circular com o foco na esquerda da foto](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346940-z-horizontal-posicionada-na-esquerda.png%3Fauto%3Dformat&w=3840&q=75)
 
Ou `right` para focar na direita:
 
![imagem retangular horizontal de um cachorro recortada em formato circular com o foco na direita da foto](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346948-z-horizontal-posicionada-na-direita.png%3Fauto%3Dformat&w=3840&q=75)
 
Já se a imagem for mais alta, você pode focar no topo (`top`):
 
![imagem retangular vertical de uma rua recortada em formato circular com o foco no topo da foto](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346960-z-vertical-posicionada-no-topo.png%3Fauto%3Dformat&w=3840&q=75)
 
Ou no fundo (`bottom`):
 
![imagem retangular vertical de uma rua recortada em formato circular com o foco no fundo da foto](https://demenezes.dev/_next/image/?url=https%3A%2F%2Fwww.datocms-assets.com%2F64896%2F1687346969-z-vertical-posicionada-no-fundo.png%3Fauto%3Dformat&w=3840&q=75)
 
Veja mais sobre a propriedade `object-position` na [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/object-positionhttps:/developer.mozilla.org/en-US/docs/Web/CSS/object-position).
 
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 😄