Liste avec images à taille fluide selon la largeur des colonnes

Dans cet exemple, les images chargées auront une taille qui dépendra de la largeur de leur conteneur.
Pour un conteneur dont la largeur sera supérieure à 640px, nous chargerons l'image de grande taille.
Pour un conteneur dont la largeur sera supérieure à 320px, nous chargerons l'image de taille moyenne.
Pour un conteneur dont la largeur sera inférieure à 320px, nous chargerons l'image de petite taille




  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.




  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.




Liste avec images à taille fixe

Dans cet exemple, les images chargées ont une taille de 158px de côté.
Elles ne seront chargées que lorsque l'utilisateur va scroller vers le bas
Pour un affichage sur téléphone mobile dont le viewport sera inférieur à 768px de large, nous choisissons aussi de ne pas afficher les images




  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    Aenean dictum purus lectus, et bibendum turpis tempor ut. In fringilla suscipit tempor. Nullam euismod urna eu varius auctor. Nullam elementum non neque in rutrum. Etiam pretium libero ac vulputate tincidunt. Aenean eget lacus in justo sodales lacinia a eget turpis.