HTML et srcset

HTML et srcset - HTML/CSS - Programmation

Marsh Posté le 04-03-2022 à 12:49:54    

Bonjour,
Mon image ne s'affiche plus avec ce code faisant appel à srcset  :kaola:  
<img class="dmitri" src="./imgs/dmitri.jpg"
   srcset="./imgs/640w/dmitri.jpg 640w,
      ./imgs/768w/dmitri.jpg 768w,
      ./imgs/960w/dmitri.jpg 960w,
   alt="mannequin" />
Les chemins sont bons...
Autres questions, comment utiliser srcset dans ces cas de figure ?
  <div id="iiSlider">
   <img data-src="./imgs/2359@2x.jpg" data-src-2x="./imgs/2359.jpg" src="" alt="Slide 1" />            
   <img data-src="./imgs/2364@2x.jpg" data-src-2x="./imgs/2364jpg" src="" alt="Slide 2" />    
            <img data-src="./imgs/IMG_6150@2x.JPG" data-src-2x="./imgs/IMG_6150.JPG" src="" alt="Slide 3" />          
   <img data-src="./imgs/DSC_2813@2x.jpg" data-src-2x="./imgs/DSC_2813.jpg" src="" alt="Slide 4" />
 
 
et
<div class="grid__item" data-size="1023x1536">
       <a href="./imgs/pds_1@2x.jpg" class="img-wrap"><img src="./imgs/thumbs/pds_1.jpg" alt="Marcus Miller" />
       <div class="description description--grid"> <h1><strong>Marcus Miller</strong></h1><h2>Palais des Sports, Paris. 5 juillet 1994</h2></div>
       </a>
       </div>
?
Merci pour votre aide,
E.

Reply

Marsh Posté le 04-03-2022 à 12:49:54   

Reply

Marsh Posté le 04-03-2022 à 14:04:13    

Il ne manquerait pas un " fermant dans ton srcset ? Et une virgule inutile ?


---------------
Réalisation amplis classe D / T      Topic .Net - C# @ Prog
Reply

Marsh Posté le 04-03-2022 à 14:58:31    

Bonjour TotalRecall et merci !
Tu veux dire que le HTML devrait ressembler à ceci ? :
<img class="dmitri" src="./imgs/dmitri.jpg"
   srcset="./imgs/640w/dmitri.jpg 640w,
      ./imgs/768w/dmitri.jpg 768w,
      ./imgs/960w/dmitri.jpg 960w"
   alt="mannequin" />
Merci pour ton aide,
E.

Reply

Marsh Posté le 04-03-2022 à 15:38:55    

Oui, ça serait déjà mieux.
Un tag doit avoir un " au début de sa valeur et un autre à la fin, sinon le navigateur ne pourra pas l'interpréter...

 

edit : un peu de lecture : https://www.alsacreations.com/artic [...] rcset.html

 

Pense aussi à jeter un oeil dans l'onglet Réseau de ton navigateur, tu pourras voir s'il a tenté de charger les images et si oui laquelle...


Message édité par TotalRecall le 04-03-2022 à 15:40:49

---------------
Réalisation amplis classe D / T      Topic .Net - C# @ Prog
Reply

Marsh Posté le 04-03-2022 à 16:04:00    

Merci beaucoup TotalRecall, le nouveau code ne fonctionne pas mais je vais jeter un œil sur ton lien.
Bon week-end,
E.

Reply

Marsh Posté le 15-04-2022 à 11:54:52    

Hello,
Je n'ai rien trouvé sur les forums (dont Alsa) qui s'adapte à mon cas. ATTENTION, je ne dis pas que rien ne s'y trouve, mais que je ne comprends pas :/
Bon week-end et merci !

Reply

Marsh Posté le 21-04-2022 à 12:02:16    

tes images sont bien nommées, elles pointent bien et sont bien accessibles sur ton serveur ?


---------------
Blablaté par Harko
Reply

Marsh Posté le 21-04-2022 à 12:32:47    

Bonjour gatsu35,
Oui oui, tout est bon. Merci, mais je ne sais pas comment adapter le srcset  :heink:  
Bonne journée,
E.

Reply

Marsh Posté le 28-05-2022 à 14:16:04    

Essaie avec cette syntaxe, teste juste avec 2 images au départ déjà, ça simplifiera.
 
 

Code :
  1. <img class="img-responsive" srcset="assets/images/ton-image.jpg,
  2.          assets/images/ton-image-2x.jpg 2x"
  3.     src="assets/images/ton-image.jpg" alt="">

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed