Modulo 01 Capitulo 11 – Imagens dinamicas, audios e videos

Modulo 01 Capitulo 11 – Imagens dinamicas, audios e videos

Por /

Home › Fóruns › Desenvolvimento Web 2020 (HTML5+CSS3) › Modulo 01 Capitulo 11 – Imagens dinamicas, audios e videos

Visualizando 1 resposta da discussão
  • Autor
    Posts
    • 1 de janeiro de 2026 às 23:56 #168467
      Gabriel Azevedo
      Participante

      Bom dia, tudo bem?

      Durante a aula o professor explicou o código abaixo:

      <picture>
        <source media="(max-width: 750px)" srcset="imagens/foto-p.png" type="image/png">
        <source media="(max-width: 1050px)" srcset="imagens/foto-m.png" type="image/png"> 
        <img src="imagens/foto-g.png" alt="Imagem flexivel">
</picture>

      E disse que nessa confifuração de max-width, deve haver essa ordem dos tamanhos das imagens em ordem crescente nos source, com a imagem principal por ultimo. Gostaria de saber qual seria a ordem na configuração min-width. Testei o código de todos os jeitos e nenhum funcionou haha

    • 2 de janeiro de 2026 às 10:20 #168472
      Tutora Jessica
      Moderador

      Ola Gabriel, no minuto 05:40 em diante o professor estipula o tamanho da imagem (largura e altura) , no gimp.

      O navegador lê as <source> de cima para baixo e usa a primeira condição que for verdadeira.
      Por isso, a ordem das media queries é fundamental.

      Com max-width, você vai do menor para o maior.
      Com min-width o raciocínio se inverte.

  • Autor
    Posts
Visualizando 1 resposta da discussão
  • Você deve fazer login para responder a este tópico.