HTML e CSS3 II, aula 3, task 02: medida % (porcentagem) na propriedade border-radius e outras propriedades

Oi Elías, tudo bem? Até onde sei, a porcentagem é sempre em relação a largura, mas você não definiu uma largura, certo? O que aconteceu?

A imagem tem uma largura implícita, que é de fato o real tamanho dela neste caso. Você notou que quando alterou o height, a largura da imagem também mudou? Bom, como você não forçou uma largura diferente, o navegador vai adaptar a largura com base na altura mantendo a proporção.

Dai o processo continua, o border-radius assume o width implícito e deixa a imagem arredondada. Pegou a ideia?

Olá Wanderson, tudo bem sim e contigo?

Entendi a tua explicação sobre o border-radius se basear na largura implícita da imagem. Porém a dúvida que fica é: a porcentagem é sempre em relação à largura do próprio elemento ou do elemento pai, ou depende do elemento, da propriedade do elemento, etc.?

Porque neste caso entendi que o border-radius se baseou na propriedade implícita de largura do próprio elemento, e não do elemento pai, e o margin, left, etc são baseados no elemento pai...

Desde já obrigado! Atte., Elías

Isso Elías, depende da propriedade. Isso tá relacionado ao fato de qual contexto será influenciado pela propriedade. O border-radius faz os cálculos com base no próprio elemento, isso por que ele será o afetado.

Quando mudamos o width por exemplo, estamos alterando o elemento, mas a porcentagem leva em consideração outro contexto, não dá pra calcular o width de um elemento baseado nele mesmo, faz sentido?

O problema das medidas relativas é justamente esse: Relativo a quem? Isso vai mudar dependendo do contexto. A relação do border-radius de um elemento com sua própria largura faz sentido, já que o cálculo do raio da circunferência é baseado nos cantos do elemento. Em outros casos, a relação será baseada em outro contexto que pode ser o elemento pai, avô, bisavô, etc.