@correlucas
Posted
👾Oi João Oliveira, tudo bem? Parabéns pela sua nova solução!
O seu componente ficou muito bom, pra melhorar ainda mais, ficou faltando deixar o container e a imagem responsiva. Pra fazer isso você precisa substituir os width com max-width. A diferença entre os dois é que width tem uma largura fixa e impede do container crescer ou diminuir já o max-width permite que o container tenha uma largura máxima mas possa diminuir pra ajustar com a tela.
Pra fazer com que a imagem pegue a lagura total do container menos o padding, vc precisa colocar display: block e max-width: 100% desse jeito ela cresce o tamanho do container e ajusta de acordo com o tamanho dele.
img { display: block; max-width: 100%; }
👋 Espero que essas dicas te ajudem e que você continue no foco!
