Aguarde...

24 de abril de 2020

Imagem circular do CSS: Guia completo “Como fazer”

Imagem circular do CSS: Guia completo “Como fazer”

O problema de CSS da imagem em círculo: As imagens vêm em forma de retângulo ou quadrado.

Você sempre pode usar um editor de fotos como o Gimp ou o Photoshop para cortar uma imagem em um círculo (se é isso que você deseja, confira esta ação automatizada do PhotoshopSupply para Cortar uma imagem em qualquer forma ) ou até mesmo usar ferramentas on-line como o MockoFun para Crop Picture Into Círculo Online . Mas este post é sobre como criar imagens circulares usando CSS.

Então, como você cria uma imagem de círculo apenas com CSS?

Neste post, mostrarei como usar CSS para transformar uma imagem retangular ou quadrada em uma imagem circular.

Imagem circular do CSS: Guia completo "Como fazer"

Imagem arredondada CSS usando border-radius

A solução mais simples para criar uma imagem de círculo CSS é usar  border-radius. Isso é usado para criar bordas arredondadas para elementos HTML, portanto também funciona para imagens.

Para que este método funcione em imagens de todas as proporções de tamanho (paisagem, retrato ou quadrado), é necessário que a imagem tenha um elemento HTML pai, também conhecido como invólucro. Usaremos um  spanelemento como wrapper com o circle-imagenome da classe CSS.

Aqui está o código HTML:

<span class = "circle-image">
 <img src = "sua-imagem.jpg" />
</span>

E o CSS para fazer a imagem circular:

.circle-image {
  display: bloco embutido;
  raio da borda: 50%;
  estouro: oculto;
  largura: 50 px;
  altura: 50px;
}
.circle-image img {
  largura: 100%;
  altura: 100%;
  ajuste do objeto : capa ;
}

Esse é todo o código CSS necessário para exibir uma imagem de círculo HTML !

Eu usei  display:inline-blockporque  spané por padrão  inlinee preciso de algo que eu possa definir tamanhos.

Definir  border-radius50% é realmente o que cria nossa imagem arredondada CSS, porque arredonda os cantos com um raio de 50% (metade) de todo o tamanho da imagem.

Para o  imgeu apenas usei 100% para o tamanho para garantir que ele se encaixe perfeitamente dentro do elemento de embalagem.

O  object-fit:cover  garante que a proporção da imagem seja mantida, para que não seja esticada.

Essa abordagem é bastante simples, mas não é sem inconvenientes. Por exemplo, você precisa inserir o tamanho da imagem. Coloquei 50px, mas você terá que colocar o tamanho necessário.

Usando CSS Circle Image background-image

Basicamente, usamos CSS para definir nossa imagem no plano de fundo de um elemento HTML e arredondamos o elemento.

Isso exibirá nossa imagem de círculo. Aqui está o código HTML:

Aqui está o código HTML:

<div class = "circle-image"> </div>

e nosso código CSS da imagem circular:

.circle-image {
  largura: 50 px;
  altura: 50px;
  background-image: url ('sua-imagem.jpg');
  tamanho do plano de fundo: capa;
  display: bloco;
  raio da borda: 50%;
}

Feito!

Se você precisar posicionar a imagem de maneira diferente dentro do círculo, poderá usar a  background-positionpropriedade CSS para especificar a posição esquerda e superior ou as combinações de  bottom|top|center|left|right.

Na maioria dos casos, essas soluções serão suficientes, mas e se você precisar criar uma imagem de círculo responsiva com CSS?

Imagem responsiva do círculo CSS

Quer gostemos ou não, o design responsivo da web é um requisito importante para os sites. Vamos ver o que precisamos alterar no código CSS da imagem do círculo acima para criar uma imagem circular responsiva.

O código HTML permanece o mesmo, porque ainda precisamos do elemento de quebra automática:

<span class = "circle-image">
 <img src = "sua-imagem.jpg" />
</span>

E o código CSS responsivo da imagem circular:

.circle-image {
    display: bloco embutido;
    estouro: oculto;
    largura: 33%;
    fundo de preenchimento: 33%;
    altura: 0;
    posição: relativa;
}
.circle-image img {
  largura: 100%;
  altura: 100%;
  posição: absoluta;
  raio da borda: 50%;
  ajuste do objeto : capa ;
}

Então, o que mudamos?

Bem, em primeiro lugar, temos a  widthdo  spanconjunto de elemento de envolvimento com um por cento. Isso torna a imagem do círculo responsiva. Eu usei 33%, então será dimensionado para 1 terço do contêiner de imagem.

Sei que há muito mais nas imagens responsivas em CSS, como consultas de mídia por exemplo, mas isso está fora do escopo desta publicação.

Aqui está um truque legal:

definir height0 e  padding-bottomigual ao  widthé um truque CSS para transformar a  spanforma em um quadrado. Precisamos disso para garantir que a imagem se torne um círculo e não uma elipse espremida.

Não inventei isso, encontrei este truque sobre como tornar um elemento HTML um quadrado com CSS aqui .

Uma última coisa que definimos para o elemento de quebra automática é o  position:relative. Isso ocorre porque a imagem terá  position:absolutee queremos que a imagem seja absoluta em relação ao elemento de quebra automática, e não ao documento inteiro.

Finalmente, definimos  border-radiusnovamente 50%, mas desta vez na imagem. Isso transformará a imagem em um círculo.

Faça uma imagem de círculo com CSS clip-path

Agora, vamos ver outro método para usar CSS para imagens de círculo.

A  clip-path propriedade CSS cria uma região de recorte que define qual parte de um elemento deve ser mostrada. As peças que estão dentro da região são mostradas, enquanto as externas estão ocultas. Um dos valores para essa propriedade CSS é  circle.

Aqui está a sintaxe:

caminho do clipe: círculo ([<raio>]? [em <posição>]?)

Portanto, com essa propriedade CSS, você pode recortar um elemento de imagem na forma de um círculo com um raio especificado e com um centro especificado.

O código HTML permanece o mesmo:

<span class = "circle-image">
 <img src = "sua-imagem.jpg" />
</span>

E no código CSS responsivo da imagem circular, substituímos apenas border-radiuspor  clip-path:

.circle-image {
    display: bloco embutido;
    estouro: oculto;
    largura: 33%;
    fundo de preenchimento: 33%;
    altura: 0;
    posição: relativa;
}
.circle-image img {
  largura: 100%;
  altura: 100%;
  posição: absoluta;
  caminho do clipe: círculo (50%);
  ajuste do objeto : capa ;
}

Adicionar a clip-pathpropriedade corta a imagem em um círculo com um raio que é metade do elemento de quebra automática. Se você precisar

Postado em Blog
Escreva um comentário