Partage
  • Partager sur Facebook
  • Partager sur Twitter

Responsive/ probléme pour changer de logo.

Changer de logo en fonction de la taille de l'écran.

Sujet résolu
    23 janvier 2020 à 1:40:27

    Bonsoir a tous,

    Je voudrais que mon site affiche l'image d'un logo sur ordinateur et l'image d'un autre logo sur mobile.

    J'ai éssayé ce code dans ma page html:

    <h1><img media="screen and (max-width: 1024px)" class="logo" src="images/logogg.png" alt="logo"/></h1>
    <h1><img media="screen and (min-width: 1024px)" class="logo" src="images/logog.png" alt="logo"/></h1>

    Mais les deux images s'affichent en local sur mon écran d'ordinateur et je ne trouves pas la solution.

    Merci d'avance pour votre aide.

    • Partager sur Facebook
    • Partager sur Twitter
      28 janvier 2020 à 18:21:24

      Salut,

      tu ne peux pas utiliser les médias screen comme tu viens de le  faire,

      tu as dès un cours complet sur ça ;

      https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries

      pour répondre à ta question avec les médias screen en dessous de tant de pixel tu peux dire à ton logo de disparaitre :

      display:none;

       et ton nouveau logo d'apparaitre :

      display:block;


      et vice versa.

      • Partager sur Facebook
      • Partager sur Twitter
        31 janvier 2020 à 11:51:08

        Merci a vous deux.

        Ceci fonctionne:

        <picture>
          <source media="(max-width: 1024px)" class="logo1" srcset="images1/logogg.png">
          <source media="(min-width: 1024px)" class="logo" srcset="images/logog.png">
          <img src="images/logog.png" alt="logo">
        </picture>

        Bonne journée a tous.

        • Partager sur Facebook
        • Partager sur Twitter

        Responsive/ probléme pour changer de logo.

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown