5

Tenho um bloco div com altura e largura de 55px e border-radius: 100%; e quero por uma imagem dentro, mas se a imagem for retangular e eu deixo-a com border-radius: 100%; ela fica de forma oval! Tem como a div sobrepor a imagem e tapar a parte fora do circulo desse jeito : imagem com exemplo

Mesmo que a imagem seja meio retangular, sem a destorcer ? Entendo que a div deve sobrepor a imagem, no finalizando assim : resultado final

Desde já, Obrigado!

1
  • É só por a imagem dentro da <div> como background. Aí ele vai mostrar a imagem redonda.
    – Franchesco
    Commented 30/06/2015 às 14:46

2 Respostas 2

7

Definindo o overflow da div como hidden é possível fazer isso sem utilizar a imagem como background.

Caso a imagem não caiba proporcionalmente na div defina uma cor de fundo para a imagem não fica cortada

.round {
    border-radius: 100%;
    overflow: hidden;
    height: 100px;
    width:100px;
    background: black;
}

img {
    width: 100%;
}
<div class="round">
    <img src="http://www.wingspan.co.nz/images/raptor.jpg" />
</div>

1
  • 1
    Tente isso utilizando a imagem dele: https://i.sstatic.net/AyzfI.jpg.
    – falsarella
    Commented 30/06/2015 às 19:20
1

Considerando que as dimensões da imagem sempre será a mesma, tente da seguinte maneira:

.img-arredondada {
  border-radius: 50%;
  background-position: -15px -15px;
  height: 195px;
  width: 195px;
}
<div class="img-arredondada" style="background-image: url(https://i.sstatic.net/AyzfI.jpg)"></div>

O border-radius deixa arredondado.
O background-position faz ignorar a faixa superior, começando a imagem onde interessa.
O height junto com o width fazem ignorar faixa inferior, terminando a imagem no ponto certo.

1
  • Porque o voto contra? Algum motivo?
    – falsarella
    Commented 30/06/2015 às 19:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .