-3

Não estou conseguindo utilizar imagem dinâmica em HTML. Estou tentando fazer a imagem mudar conforme o tamanho da tela mude, mas não está indo. Sei que deve ter algo errado, mas não estou conseguindo identificar. Eu já havia usado a Tag Picture antes e havia dado certo.

Segue o código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <link rel="shortcut icon" href="" type="image/x-icon">
    <title>Valor Artístico</title>
</head>
<body>
    
    <table width="98%"> 
            <th><a href="" rel="">VA PodCast</a></th>
            <th><a href="" rel="">Valor Da Vida</a></th>
            <th><a href="" rel="">Experiências em Texto</th>
            <th><a href="" rel="">Conheça Nossos Projetos</a></th>
            <th><a href="" rel="">CostaViana Enterprise</th>
        </tr>
    </table><br>

    <div align="center">

        <picture>

            <source  media="(max-width=225px)" srcset="img/logo2.png" type="image/png">

            <source media="(max-width=300px)" srcset="img/logo1.png" type="image/png">

            <img src="img/logo.png" alt="Imagem Grande">
        </picture>

    </div>


</html>

1 Resposta 1

1

É bem simples, o parâmetro de media query espera ":" e não o "=" então, se você trocar para:

    <picture>
        <source media="(max-width:225px)" srcset="img/logo2.png">
        <source media="(max-width:300px)" srcset="img/logo1.png">
        <img src="img/logo.png" alt="Imagem Grande">
    </picture>

Você já vai conseguir ver as imagens mudando, por mais que esse tamanho de tela seja bem pequena

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .