Porque quando coloco width 100% para as imagens elas ficam dentro do figure, quando não coloco elas saem pela borda direita? Elas já não estão em 100% do seu tamanho?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Porque quando coloco width 100% para as imagens elas ficam dentro do figure, quando não coloco elas saem pela borda direita? Elas já não estão em 100% do seu tamanho?
Quando usar % no css estamos nos referindo a % da largura do elemento pai e nao de seu conteudo.
Cuidado que até mesmo em alguns casos que parece que se refere a altura, está se referindo a largura, como um padding-bottom: % se refere à largura do elemento pai e nao à altura.
Entendi. Obrigado!
Exceção:
A porcentagem (%) ao ser usada na propriedade transform não se refere à largura do elemento pai, mas sim à largura do próprio elemento.
transform: translateX(-50%); /* se o elemento tiver largura 100px, ele irá transladar 50px na direção contrária à do eixo X. */