Quelqu'un peut-il voir où je vais mal avec ce srcset?

Je construis un site Wordpress responsive. Le flux du blog contient une liste d'histoires qui ont un titre et une image. Les tailles d'image doivent être les suivantes:Quelqu'un peut-il voir où je vais mal avec ce srcset?

jusqu'à 479px de large - 140x140px (histoires sont affichées dans une liste)
sur 480px de large - 360x190px (histoires sont affichées dans une rangée de 3)

J'ai essayé d'utiliser SRCSET pour que l'image 140x140px soit chargée pour les navigateurs jusqu'à 479px et l'image 360px pour les navigateurs 480px et plus. Je ai googlé et lu littéralement chaque peu de documentation là-bas sur les tailles et srcset, mais je ne peux tout simplement pas obtenir ma tête autour d'elle. Jusqu'à présent, je suis venu avec ce qui suit:

<img 
 
    src="http://placekitten.com/140/140" 
 
    srcset=" 
 
    http://placekitten.com/140/140 140w, 
 
    http://placekitten.com/360/190 360w" 
 
    sizes=" 
 
    (max-width: 479px) 140px, 
 
    (min-width: 480px) 360px, 
 
    100vw" 
 
    alt="" 
 
    class="lazyload" 
 
/>

Malheureusement tout cela ne fait qu'afficher la 360x190px à chaque largeur, en dépit de la src réelle de l'image étant définie sur l'image 140x140px.

Quelqu'un peut-il voir ce que j'ai manqué? Je pense que ce sont les tailles que je suis le plus confus. J'ai ajouté dans les requêtes médiatiques comme documentées mais elles ne semblent pas être appliquées?

Merci!

Source

2017-10-20 Ali Green

S'il vous plaît partager votre ** balisage généré **. PHP est un langage côté serveur et ne peut pas être rendu par l'extrait de code. – Terry

Salut! Je l'ai mis à jour pour utiliser les images de placekitten mais je ne suis pas sûr que cela a fonctionné? Je l'ai seulement fonctionnant localement ainsi le code était juste un exemple de ce que je travaille avec. –

Quel navigateur utilisez-vous? Votre code dans la question travaille pour moi. –

Notez que cette stratégie srcset sur l'élément <img> dépend du fait que le navigateur n'a pas mis en cache l'image encore. Cette stratégie est destinée à économiser la bande passante pour le navigateur. Donc, si vous commencez avec une large fenêtre, le navigateur récupère simplement la plus grande des deux images et ne retombe plus sur la plus petite même si vous la redimensionnez.

Si vous voulez forcer le navigateur à charger des images à différents points d'arrêt viewport, utilisez plutôt <picture>:

<picture alt="" class="lazyload"> 
 
    <source srcset="https://via.placeholder.com/360x190" media="(min-width: 480px)" /> 
 
    <img src="https://via.placeholder.com/140x140" /> 
 
</picture>

Source

2017-10-20 14:30:31 Terry

Merci pour votre réponse! Malheureusement j'ai essayé de copier et coller ce code juste pour tester et il affiche toujours le 360px large quand mon navigateur est sous 479px. C'est comme ça que j'ai logiquement pensé que ça devrait fonctionner - jusqu'à 479px, puis utiliser l'image 140px, et 480px et plus, alors utiliser l'image 360px, mais ça semble juste l'ignorer. J'ai aussi essayé le mode incognito juste en cas de cache mais pas de chance! –

@AliGreen Cela fonctionne, mais vous devez d'abord le tester dans une résolution inférieure et vider votre cache.Pensez à ceci: lorsque le navigateur a une version à résolution plus élevée de l'image, il ne veut pas réduire la taille d'une image plus petite même après avoir réduit la fenêtre d'affichage. – Terry

Je suis en train de tester sur un Macbook Pro rétine - c'est une résolution de 2x n'est-ce pas? J'ai pensé que c'était peut-être le problème mais j'ai vérifié dans Chrome à la largeur de 130px (en utilisant les outils réactifs) et toujours ressortant comme largeur 360px - très étrange! https://imgur.com/a/RVLjx –

Vérifiez le code ci-dessous.

<picture> 
 
       <source class="img-fluid" srcset="//www.fillmurray.com/140/140" media="(max-width: 479px)"><img class="img-fluid" src="//www.fillmurray.com/360/190"> 
 
      </picture>

Source

2017-10-20 14:27:00 izulito

Quelqu'un peut-il voir où je vais mal avec ce srcset?

Répondre

Questions connexes