Porque as imagens da sessão receita ficam distorcidas (esticadas) quando vamos diminuindo a tela para o tamanho mobile?
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!
Solucionado
Porque as imagens da sessão receita ficam distorcidas (esticadas) quando vamos diminuindo a tela para o tamanho mobile?
Oi Laiara, tudo bem?
Isso acontece porque a altura das imagens da receita estão colocadas como 200px. Ou seja, a altura vai ser 200px (fixo) não importa o tamanho da tela.
Para resolver isso, podemos usar porcentagem (%), uma boa prática para tornar mais responsivo, por exemplo:
.receita__imagem {
height: 100%;
width: 100%;
}Agora a altura/largura vão ter 100% do espaço disponível, olha só:
Portanto, não fica mais distorcido quando diminuímos a tela! Espero ter ajudado, bons estudos!
Obrigada Giovanna, ajudou sim!!