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 emrem
. 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 decontainer
, 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 adiv
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 emrem
. Veja mais sobre valores absolutos e relativos em CSS -
outline
: serve apenas para auxiliar visualmente a encontrar ocontainer
. 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%
eheight: 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 😄
Top comments (0)