Eu já fiz o curso da Alura de design responsivo, mas faz tempo e com o Bootstrap, eu parei de criar CSS por um tempo. Agora eu tentei criar o meu próprio grid e eu queria que as imagens no celular expandissem a tela toda, mas tive uns resultados estranhos. Colocando 100%, a imagem fica maior que o tamanho original e com max-width fica sobrando um espaço na lateral. Então eu queria entender melhor esse 100% é relativo a que?
hoje, com a Alura e o Google Gemini
Boa noite Gisele tudo bem? Caso seja possível poste o código aqui pra gente dar uma olhada, mas já tentou adicionar a classe img-responsive? É uma classe do próprio Bootstrap, caso você esteja fazendo uso do mesmo no seu projeto.
Se você colocar a imagem com width 100% ela vai ficar com largura 100% relativo a sua tag pai "mais próxima" que tiver um tamanho "definido" por exemplo em px setado! No caso que você está citando, parece que ela está ficando 100% relativo ao containe do bootstrap, ou a tag body do html.
Oi, tudo bem. É que eu estou tentando criar um grid sem Bootstrap, porque algumas pessoas querem só o grid e acham muita coisa baixar o Bootstrap. Eu estou aprendendo flexbox e tentei fazer um grid de imagens. Segue o link, mas não está carregando as imagens que são de um site de placeholder.