2017-06-22 5 views
0

Commençons tout juste par img srcset. J'ai du mal à comprendre le comportement en ce qui concerne l'affichage d'images dans une certaine largeur dictée par la div.L'image responsive scrset ignore la largeur div pour afficher une image plus grande que nécessaire dans Firefox

Même si la largeur css est définie sur 1664 pixels et qu'une image de 1680 pixels est disponible, elle utilise la version 3200 pixels. La résolution de l'écran est réglée sur 1920 x 1200. Le code semble ignorer le CSS et utiliser la largeur du navigateur (1920px).

Y a-t-il quelque chose d'anormal dans le code suivant qui pourrait en être la cause ou est-ce ainsi que fonctionne srcset?

<div style="width:1664px;"> 
    <a href="http://www.test.com"> 
     <img src="/images/1680-example-image.jpg" 
      srcset="/images/0960-example-image.jpg 960w, 
      /images/1280-example-image.jpg 1280w, 
      /images/1680-example-image.jpg 1680w, 
      /images/3200-example-image.jpg 3200w" 
      sizes="100vw"> 
    </a> 
</div> 

Répondre

1

C'est le comportement correct (bien qu'un peu ennuyeux). Les valeurs w parlent toujours de la taille de la fenêtre, pas de la taille du conteneur d'image.

+0

Merci. Plus d'infos ici: https://cloudfour.com/thinks/responsive-images-101-part-4-srcset-width-descriptors/ – user2151345