Desafio 7 imagens reponsivas

Home › Fóruns › Desenvolvimento Web 2020 (HTML5+CSS3) › Desafio 7 imagens reponsivas

Visualizando 7 respostas da discussão
  • Autor
    Posts
    • 17 de março de 2022 às 18:42 #88869
      Pedro sulpicio
      Participante

      Olá, nao consegui achar nas vídeo aulas alguma explicação da tag source

      Minha página carrega apenas a imagem da tag , porém nao redimensiona a imagem; quando vou apontar o endereço na scrset dou source nem sequer aparece a imagem como endereço, entao utilizo sct

      <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>Imagem Flexível</title>
</head>
<body>
    <h1>Imagem flexível</h1>
    <p>Você está vendo a imagem completa? Experimente ampliar o tamanho da sua janela para uma melhor experiêcia</p>
    <picture>
    <source media="(min-width:300pix)" src="img/paisagem-p.png" sizes="">
    <source media="(min-width:500pix)" src="img/paisagem-m.png" sizes="">
    <img src="img/paisagem-g.png" alt="Paisagem" srcset="">

    </picture>
    
</body>
</html>
    • 23 de março de 2022 às 13:00 #89293
      Tutora Tainá
      Mestre

      Pedro, esse assunto é abordado nessa aula, dê uma olhada nela e veja se consegue resolver o seu problema. Se restar alguma dúvida volte aqui e conte pra gente! 🖖

    • 25 de março de 2022 às 11:06 #89479
      Pedro sulpicio
      Participante

      Respondendo:

      O erro: “300 pix”
      correto: (min-width:300px)

      <source media=”(min-width:300pix)” src=”img/paisagem-p.png” sizes=””>

    • 17 de agosto de 2024 às 08:27 #141700
      Mateus Gomes de Melo
      Participante

      Bom dia,
      Ao carregar o elemento <source> para especificar uma variação da imagem dentro da tag <picture> coloquei um media type mas as imagens menores não carregavam, somente a imagem dentro da tag era carregada.
      Dessa forma:
      <picture>
      <source srcset=”imagens/paisagem-400.jpg” media=”(max-width: 850px)” type=”image/jpeg”>
      <source media=”(max-width: 1250px)” srcset=”imagens/paisagem-800.jpg type=”image/jpeg”>
      Um menino sentado, observando o horizonte
      </picture>

      Mas quando tirei o media type dos elementos <source> as imagens menores foram carregadas. Isso é estranho porque em aula o professor usar um media type dentro do elemento <source>, no caso ele usa um para extenssão .png e eu usei um para extenssão .jpg.

      Há algo de errado com isso?

    • 19 de agosto de 2024 às 10:04 #141818
      Tutora Jessica
      Moderador

      Olá Mateus, qual módulo e aula ou exercício seria esse?

    • 19 de agosto de 2024 às 17:30 #141859
      Mateus Gomes de Melo
      Participante

      Me refiro ao desafio da imagem flexivel, desafio 007, do módulo 1.

    • 19 de agosto de 2024 às 17:35 #141863
      Tutora Jessica
      Moderador

      Ola Mateus, a extensão deve ser da mesma forma em que é feita na aula.

    • 19 de agosto de 2024 às 17:36 #141864
      Tutora Jessica
      Moderador

      Trouxe sua duvida para uma já existente no fórum do mesmo desafio, acima tem uma solução de erro que pode lhe ajudar de alguma forma tambem.

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