Solucionado
Olá,
No artigo anterior ao curso, Srcset: Trabalhando com imagens responsivas, vimos sobre a tag picture.
Ao tentar implementar essa tag no projeto final do curso CSS: Dispondo elementos com Flexbox e Grid, percebi que as imagens passam a ficar sempre com o seus tamanhos originais e não se adaptam mais ao tamanho da tela como acontece quando uso a tag img.
Gostaria de esclarecer o motivo.
Desde já, obrigada.
teria que ver o seu código fonte, mas bem provável tem algum erro no css porque se colocar um display block na tag img e max-width 100% e height auto a imagem não é para passar do tamanho do elemento pai dela caso ele tenha um tamanho definido.
Oi, Anthoni
Então, o código fonte está nesse repositório: https://github.com/natalia-sampaio/alura-curso-flex-grid.
Aí está como foi ensinado no curso, usando duas tags img no html (linhas 33 e 34 do index.html) e media query em seus respectivos seletores no arquivo estilos.css.
Quebrei bastante a cabeça aqui para ver o que poderia ser, mas deu certo aqui.
tamanho da imagem mobile troca quando chega no tamanho max-width 655px e a partir 656px fica a desktop
<picture>
<source media="(min-width: 656px)" srcset="assets/img/banner_1.png" class="cartao__imagem cartao__imagem--desktop">
<img src="assets/img/banner-mobile_1.png" class="cartao__imagem cartao__imagem--mobile">
</picture>Você acrescenta essas linhas de código no css fora do @media de min-width: 1440px
.cartao__imagem--mobile, .cartao__imagem--desktop {
display: block;
width: 100%;
}e pode remover essa linha, pelo que vi não faz nada de diferente já que está com tag picture está na @media de min-width: 1440px linha no css 321 por aí.
.cartao__imagem--mobile {
display: none;
}
.cartao__imagem--desktop {
display: block;
}Valeu, Anthoni!
Meu erro era que estava colocando a classe cartao__imagem na tag picture.
Fiz usando o min-width:1440px para ver se ia continuar funcionando conforme proposto no projeto original e tbm funcionou.
Muito obrigada!