Solucionado
Fala galera, Estou com um problema que creio ser simples só que eu não estou conseguindo resolver. Estou quero aplicar uma borda arredondada em um foto no site que estou fazendo, Igual a foto de profile do Alura (Já dei inspecionar elemento aqui, vi o css e não consegui). Quando aplicou o border-radius: 50%; na tag img e atualizo a página, vejo que a foto fica oval. Alguém já passou por algo parecido? Como solucionou?
Agradeço demais! Obrigado
Olá Arthur, tudo bem ?
Qual foram as definições de height e width que você colocou ?
Arthur,
Colocando o valor em 50% deveria ficar uma bola certinha, pode mandar o código html e css?
Não esqueça de usar o "inserir código" para que a formatação seja mantida.
Abcs!
'
Meu nome é Arthur Carvalho, um web designer carioca da gema. Estudante de engenharia elétrica, encontrou no designer uma forma de colocar em prática toda sua criatividade.
'img{ border-radius: 50%; border: 3px solid #BADA55; width: 15em; padding-top: 2em;
}'
Arthur,
Para inserir código aqui na Alura basta fazer assim:
```
seu código aqui
```Mas já vi aqui que a sua regra CSS tem um padding-top. Ele acaba aumentando o tamanho do elemento, por isso do efeito "ovo".
Você pode fazer uma dessas opções:
box-sizing: border-box.Esse box-sizing faz com que o browser interprete a largura/altura junto com o padding/border. Você vai ver ele em alguma aula mais pra frente no curso de HTML e CSS.
Espero ter ajudado,
Abcs!
Valeu Natan! Ajudou demais. Retirei o padding-top e funcionou. Com o box-sizing continuou o problema.
Valeu mesmo
Arthur,
Opa maravilha!
Testei aqui e realmente o box-sizing na img não funciona, por enquanto deixa sem o padding mesmo então.
Magina cara! Precisando só postar que a comunidade aqui sempre ajuda!
Abcs!