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.

Bonjour, l’attribut media n'existe pas pour cette balise, ce que tu cherches ce trouve dans l'attribut srcset et sizes de la balise <img> 

Lire https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web

Édit : d'autres liens utiles

• https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html
• https://www.alsacreations.com/article/lire/1669-Images-responsive-et-attribut-sizes-amstramgram-pic.html
• https://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-adaptation-mobile.html
• https://la-cascade.io/images-responsives-picture-et-srcset/

-
Edité par AbcAbc6 23 janvier 2020 à 3:55:15

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.

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.